Concealing a table column using a specific class

Is there a way to hide the first column of the table without removing the col-id class?

for (let i = 0; i < result.marks.length; i++) {
    let col_id = result.marks[i].col_id;
    let student_id = result.marks[i].student_id;
    let roll_no = result.marks[i].roll_no;
    let first_name = result.marks[i].first_name;
    let last_name = result.marks[i].last_name;
    let secured_marks = result.marks[i].secured_marks;

    $("#marks-table tbody").append('<tr></tr>');
    $("#marks-table tbody tr:last").append('<td class="col-id" hidden>' + col_id + '</td>');
    $("#marks-table tbody tr:last").append('<td hidden>' + student_id + '</td>');
    $("#marks-table tbody tr:last").append('<td>' + roll_no + '</td>');
    $("#marks-table tbody tr:last").append('<td>' + first_name + '</td>');
    $("#marks-table tbody tr:last").append('<td>' + last_name + '</td>');
    $("#marks-table tbody tr:last").append('<td class="secured-marks">' +
        '<input type="text" class="form-control text-center secured-marks-input" value="' + secured_marks + '"></td>');
}

Answer №1

If you want to conceal a <td> element, simply use

<td style="display:none;">

Therefore, in your script, you can execute

$("#marks-table tbody tr:last").append('<td class="col-id" style="display:none;">' + col_id + '</td>');

Answer №2

In order to achieve this with Jquery, you have the option of utilizing selectors, such as shown below :

$('#marks-table tr td:first-child').hide();

Answer №3

Did you test out implementing the CSS for "col-id":

.col-id{
    visibility: hidden;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activating a link without clicking will not trigger any javascript functions

I have been attempting to display an image when I hover over a link, but for some reason, the .hover() event is not functioning as expected. Initially, I am just aiming to have an alert pop up. Once I have that working, I can proceed with fading elements i ...

Retrieve a collection of nested dictionaries containing flask and angular data

In my app development journey with flask and ionic(angular), I'm working on returning a JSON list. Here's the python code snippet: def get-stocks(): # Select all stocks cursor.execute("""SELECT * FROM `tbl_symbol_index`"" ...

Ways to conceal all components except for specific ones within a container using JQuery

My HTML structure is as follows: <div class="fieldset-wrapper"> <div data-index="one">...</div> <div data-index="two">...</div> <div data-index="three">...</div> < ...

Unable to scroll to the top of the page

Here is my code snippet - ($("div[id$='fixedDataDiv']")[0]).scrollTop(0); This piece of code gets executed when I switch tabs in Internet Explorer 8. An error message pops up saying - Microsoft JScript runtime error: Object doesn't sup ...

Issue with MVC 500 Error on Live Server

I am encountering an issue when deploying the functionality from my local and Test Server to the Production server. Specifically, the function responsible for sending emails is causing an Internal Server Error 500 in the Production environment. All other ...

Modify one individual css style / tag

Currently, I have a large React application that is utilizing Material UI 4.3.0. I attempted to remove the margin-top style of label + .MuiInput-formControl within a select Mui component. To achieve this, I used the 'overrides' tag in my App.js ...

Displaying a loading image using the getJSON method

I'm in need of a loading image to display while fetching data with AJAX using getJSON. I've searched for a solution but haven't come across the best method yet. Can you advise on the most effective approach to achieve this? $.getJSON(' ...

Unable to close expanded grid item using close button

Currently, I am working on a simple 3 column grid where each grid item consists of an image and a close button. The functionality I want to achieve is that when a grid item is clicked, the image should expand and the close button should become visible. Th ...

Properties of the jQuery XMLHttpRequest object in callback functions of ajax requests

If you have an ajax callback function like the one below, how can you retrieve a status/response code or other information from the 'xhr' object? function showResponse(responseText, statusText, xhr) { } Here are some attempts to retrieve inform ...

Tips for building a responsive website with JavaScript and media queries:

Looking to ensure my website is responsive, but with specific requirements: Need the navigation bar to transition into a vertical hamburger drop-down menu when screen size is reduced, and it must be coded in JavaScript Planning to implement a mobile-firs ...

The burger icon in the navigation bar is malfunctioning, showing just a single horizontal line instead

I've been working on creating a responsive layout button that resembles the following design: https://i.sstatic.net/v5vDd.png However, I've encountered an issue where I can't seem to generate all three horizontal lines, only one of them. T ...

Enhancing CSS and HTML: Increasing the Border Color of Dropdown Menus and Utilizing Multiple Words per Dropdown Item

https://i.sstatic.net/ZI8Ch.png CODE div.box { display: block; text-align: center; margin: auto; z-index: 5 } #navMenu { margin: 0; padding: 0; } #navMenu ul { margin: 0; padding: 0; line-height: 30px; } #navMenu li { margin: 0; padding: 0; list- ...

"Creating dynamic webpage designs with CSS for responsive layouts

Currently, I am in the process of building a website utilizing a CSS fluid layout approach which is rooted in adaptive and responsive web design principles. For this project, I am avoiding using fixed values such as pixels (px) and instead opting for perc ...

What could be wrong with my hover command not functioning properly?

I've been attempting to create a dropdown menu using some basic CSS, but I can't figure out why the dropdown isn't functioning. I've tried everything I can think of. Below, I've included the CSS and HTML code for reference: < ...

Unable to dynamically update properties in CSS and JavaScript without refreshing the page

I've tried applying active properties in my CSS and JavaScript, but it doesn't seem to be working as expected. I can click on each list item, but the active state is not being displayed correctly. Can someone please assist me with this issue? I w ...

What is the best way to widen each tab so they fill up the entire width of the content block?

As a newcomer to both programming and this website, I've been exploring various codes for creating vertical and horizontal tabs. I have a specific query about this particular example found at https://jsfiddle.net/eu81273/812ehkyf/: My goal is to adju ...

Execute a PHP function using jQuery on the current page and display the output in a new

As a novice in jquery and ajax, I have thoroughly researched various threads and tutorials on this topic. Despite my efforts, I am still facing an issue. <script type="text/javascript"> $(document).ready(function(){ ...

Interactive modal window showcasing details of the first item upon clicking any item button

I am in the process of creating a dress shopping website. The home page showcases all dresses along with their descriptions in a grid layout, each accompanied by an 'Add to Cart' button. However, upon clicking the button, a modal popup appears sh ...

Issue with firebase.auth() method not triggering onAuthStateChanged after user login/logout操作

My code looks like this: var config = { apiKey: "xxxxx", authDomain: "xxxxx", databaseURL: "xxxxx", projectId: "xxxxx", storageBucket: "xxxxx", messagingSenderId: "xxxxx" }; firebase.initializeApp(config); $("#l ...

Issue with Dynamic Theming in Ionic Framework

Currently, I am using Ionic in combination with Angular to create an App. I have introduced dynamic theming by adding two .scss files into my theme folder. In my app.scss file, I define the layout of components without colors, while all color styles are st ...