Dynamically adding a column in html table through javascript

Question

I'm writing a java script code that will dynamically append a column of checkbox in an already existed table in html.

My html code goes like this:

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, td {
            border: 1px solid black;
            }
        </style>
        <title>PHP MyAdmin</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>Email_id</th>
                <th>Email_content</th>
            </tr>
            <tr>
                <td>[email protected]</td>
                <td>bla bla</td>
            </tr>
            <tr>
                <td>[email protected]</td>
                <td>bla bla</td>
            </tr>
        </table>
    </body>
</html>

And the javascript code that I'm writing to add column of checkboxes to this table created in html dynamically is as follows:

tbl = document.getElementsByTagName("body")[0];
tr = tbl.getElementsByTagName("tr");

for (i = 1; i < tr.length; i++) {
    tr.appendChild(document.createElement('td'));
    var checkbox = document.createElement("INPUT");
    checkbox.type = "checkbox";
    tr.cells[2].appendChild(checkbox);
    tbl.appendChild(tr);
}

I also want to specify an on click method on these checkboxes . Thanks in advance

"Somebody please help me real quick" -- From the SO How to Ask page. Pretend you're talking to a busy colleague. — evolutionxbox
– evolutionxbox, Commented Mar 13, 2017 at 16:09

Neil · Accepted Answer · 2017-03-13 16:23:25Z

Here's an answer using jQuery, since you tagged it as that, I am assuming jQuery will do.

$("#addColumn").click(function () {
	$("tr:first").append("<td>MyTitle</td>");
	$("tr:not(:first)").append("<td>Sample Element</td>");
    //$("tr:not(:first)").append("<td><input type='checkbox' />Sample Element</td>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        td {
            border: 1px solid black;
        }
    </style>
    <title>PHP MyAdmin</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Email_id</th>
            <th>Email_content</th>
        </tr>
        <tr>
            <td>[email protected]</td>
            <td>bla bla</td>
        </tr>
        <tr>
            <td>[email protected]</td>
            <td>bla bla</td>
        </tr>
    </table>
</body>
</html>
<button id="addColumn">Add Column</button>

Hikmat Sijapati · Accepted Answer · 2017-03-13 16:13:25Z

1

tr = tbl.getElementsByTagName("tr"); is an array of elements.So use tr[i] instead of tr inside for loop.

tbl = document.getElementsByTagName("body")[0];
  tr = tbl.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {

  var td = document.createElement('td');
  var input = document.createElement('INPUT');
  input.type = 'checkbox';
  td.appendChild(input);
  tr[i].appendChild(td);
}

<table border="1">
        <tr>
            <th>Email_id</th>
            <th>Email_content</th>
        </tr>
        <tr>
            <td>[email protected]</td>
            <td>bla bla</td>
        </tr>
        <tr>
            <td>[email protected]</td>
            <td>bla bla</td>
        </tr>
    </table>

answered Mar 13, 2017 at 16:13

Hikmat Sijapati

6,9691 gold badge11 silver badges19 bronze badges

1 Comment

akshay Over a year ago

Hi, I also want to specify an on click method on these checkboxes . Can you please tell me how to do that??

jessegavin · Accepted Answer · 2017-03-13 16:10:25Z

1

for (i = 1; i < tr.length; i++) {
  // create the cell
  var td = document.createElement('td');

  // create the checkbox
  var input = document.createElement('INPUT');
  input.type = 'checkbox';

  // append checkbox to cell
  td.appendChild(input);

  // append cell to row
  tr.appendChild(td);
}

answered Mar 13, 2017 at 16:10

jessegavin

75.8k28 gold badges141 silver badges165 bronze badges

Comments

happymacarts · Accepted Answer · 2017-03-13 16:12:12Z

Here is a jQuery solution (since you tagged it)

tbl = $("#theTable");
$("#theTable tr").each(function(){
  $(this).append("<td><input type='checkbox'/></td>")

});
/*
tbl = document.getElementsByTagName("body")[0];
tr = tbl.getElementsByTagName("tr");

for (i = 1; i < tr.length; i++) {

  tr.appendChild(document.createElement('td'));
  var checkbox = document.createElement("INPUT");
  checkbox.type = "checkbox";
  tr.cells[2].appendChild(checkbox);
  tbl.appendChild(tr);
}*/

table,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <table border="1" id="theTable">
    <tr>
      <th>Email_id</th>
      <th>Email_content</th>
    </tr>
    <tr>
      <td>[email protected]</td>
      <td>bla bla</td>
    </tr>
    <tr>
      <td>[email protected]</td>
      <td>bla bla</td>
    </tr>
  </table>

Collectives™ on Stack Overflow

Dynamically adding a column in html table through javascript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related