通过javascript在html表中动态添加一列通过javascript

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

我的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>[email protected]</td> 
       <td>bla bla</td> 
      </tr> 
      <tr> 
       <td>[email protected]</td> 
       <td>bla bla</td> 
      </tr> 
     </table> 
    </body> 
</html>

这我写信复选框列添加到HTML创建该表中的javascript代码动态如下：

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

我也想在这些复选框上指定点击方式。由于事先

来源

2017-03-13 akshay

_ “有人请帮助我真正的快” _ - 从SO [问]页。 _假设你正在和一位忙碌的同事谈话。 – evolutionxbox

tr = tbl.getElementsByTagName("tr");是elements.So的阵列使用tr[i]代替trfor内部循环。

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>

来源

2017-03-13 16:13:25

嗨，我也想指定一个点击方法在这些复选框。你能告诉我怎么做吗？ – akshay

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

来源

2017-03-13 16:10:25 jessegavin

这里是一个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>[email protected]</td> 
 
     <td>bla bla</td> 
 
    </tr> 
 
    <tr> 
 
     <td>[email protected]</td> 
 
     <td>bla bla</td> 
 
    </tr> 
 
    </table>

来源

2017-03-13 16:12:12 happymacarts

下面是使用jQuery的答案，因为你标记它作为，我假设jQuery将做。

$("#addColumn").click(function() { 
 
\t $("tr:first").append("<td>MyTitle</td>"); 
 
\t $("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>

来源

2017-03-13 16:17:56 Neil

通过javascript在html表中动态添加一列通过javascript

回答

相关问题