通過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

回答

相關問題