how to create a table header with a label and checkbox using JQuery dynamically

Question

I have a situation where I need to add a new column in the table and in the header of the new column should have a checkbox.

so I am creating a <th> dynamically and trying to append a <input> element (checkbox) in that <th> then appending that <th> to the first row of the table.

but in output, I can see the table with an added column header without a checkbox.

my code looks like

 var $th = '<th class="width-110">' + devCentre + '</th>';
 var $cbkSelectAll = $('<input />', { type: 'checkbox' });
 $cbkSelectAll.appendTo($th);
 $('#tblTable1 thead tr:first-child').append($th);

let me know where I am going wrong and give me some suggestions so I can add a checkbox inside the table header.

Ahmad · Accepted Answer · 2020-05-19 11:50:39Z

1

If I understood what you are trying to do, You want to append a new column to a pre-existing table, so that the column has its own <th> and consecutive <td> elements..

If that is the case, here is one way to do that:

$('#btn-new-column').click(function() {
  
  
  $('#my-table tr').each(function(i, tr) {
    // create the header cell 
    let th = $('<th>Select</th>');
    
    // create the check box
    let chk = $('<input>').attr("type", "checkbox");
    
    // create the normal row cell and append the checkbox inside it
    let td = $('<td></td>').append(chk);
    
    // check if we are currently at the top of the table
    if (i == 0) {
      // we are. So lets append the header cell
      $(tr).append(th);
    } else {
      // append the normal row cell
      $(tr).append(td);
    }

  });
  
  // hide the button to prevent multiple columns addition
  $(this).hide();
});

table {
  border-collapse: collapse;
}

table td,
table th {
  border: 1px solid grey;
  padding: 5px;
}

button {
  padding: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<table id="my-table">
  <tr>
    <th>id</th>
    <th>name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>mike</td>
  </tr>
  <tr>
    <td>2</td>
    <td>ahmad</td>
  </tr>
  <tr>
    <td>3</td>
    <td>sara</td>
  </tr>
</table>
<br>

<button id="btn-new-column">Add a new column</button>

answered May 19, 2020 at 11:50

Ahmad

12.8k7 gold badges53 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vijayashankar Aruchamy Over a year ago

this is what I want, the only thing is in <th> need to add another checkbox, on selecting that, checkbox in every row should be selected and disabled. thanks for the help. it worked for me.

fdomn-m · Accepted Answer · 2020-05-19 11:39:55Z

The issue is that $th is a string - it is not a jquery object and does not (yet) appear in the DOM so .appendTo($th) "appends" to a jquery object generated by the string in $th not the jquery object (and you do nothing with the result).

You can fix by add $() around your th string:

var $th = $('<th class="width-110">All</th>');
var $cbkSelectAll = $('<input />', { type: 'checkbox' });
$cbkSelectAll.appendTo($th);
$('table thead tr:first-child').append($th);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
</table>

Alternatively:

$th = $($th).append($cbkSelectAll);

which will create a new jquery object from the string and append the tickbox

Collectives™ on Stack Overflow

how to create a table header with a label and checkbox using JQuery dynamically

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related