CODEWITHSUNDEEP
javascriptjqueryhtmldom
akshay
akshay

Reputation: 219

Dynamically adding a column in html table through javascript

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

Upvotes: 4

Views: 25461

Answers (4)

Neil
Neil

Reputation: 14313

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>

Upvotes: 3

Hikmat Sijapati
Hikmat Sijapati

Reputation: 6994

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>

Upvotes: 1

happymacarts
happymacarts

Reputation: 2605

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>

Upvotes: 1

jessegavin
jessegavin

Reputation: 75650

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);
}

Upvotes: 1

Related Questions