Question

我正在编写一个java脚本代码，它将动态地在html中已存在的表中附加一列复选框。

我的HTML代码是这样的：

<!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>akshay1234530@yahoo.com</td>
                <td>bla bla</td>
            </tr>
            <tr>
                <td>ohm3966@gmail.com</td>
                <td>bla bla</td>
            </tr>
        </table>
    </body>
</html>

我正在编写的javascript代码，用于动态创建在html中创建的此表的复选框列如下：

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

我还想在这些复选框上指定一个on click方法。提前致谢

Answer 1

以下是使用jQuery的答案，因为你将其标记为，我假设jQuery会这样做。

＆＃13;

$("#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>");
});

＆＃13;

<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>akshay1234530@yahoo.com</td>
            <td>bla bla</td>
        </tr>
        <tr>
            <td>ohm3966@gmail.com</td>
            <td>bla bla</td>
        </tr>
    </table>
</body>
</html>
<button id="addColumn">Add Column</button>

＆＃13;

Answer 2

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

Answer 3

tr = tbl.getElementsByTagName("tr");是一个元素数组。在tr[i]循环中使用tr代替for。

＆＃13;

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

＆＃13;

<table border="1">
        <tr>
            <th>Email_id</th>
            <th>Email_content</th>
        </tr>
        <tr>
            <td>akshay1234530@yahoo.com</td>
            <td>bla bla</td>
        </tr>
        <tr>
            <td>ohm3966@gmail.com</td>
            <td>bla bla</td>
        </tr>
    </table>

＆＃13;

Answer 4

这是一个jQuery解决方案（因为你标记了它）

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>akshay1234530@yahoo.com</td>
      <td>bla bla</td>
    </tr>
    <tr>
      <td>ohm3966@gmail.com</td>
      <td>bla bla</td>
    </tr>
  </table>

通过javascript

4 个答案: