CODEWITHSUNDEEP
javascripthtmljquerycheckbox
Vijayashankar Aruchamy
Vijayashankar Aruchamy

Reputation: 131

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

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.

Upvotes: 0

Views: 1305

Answers (2)

Ahmad
Ahmad

Reputation: 12737

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>

Upvotes: 1

fdomn-m
fdomn-m

Reputation: 28611

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

Upvotes: 0

Related Questions