通过点击按钮添加行

Question

我有两个按钮的表添加不同的行，我试过这段代码，但它不起作用。 这是我的脚本代码：

function addRow(tableID) { 
 
    var table = document.getElementById(tableID); 
 
    var rowCount = table.rows.length; 
 
    var row = table.insertRow(rowCount); 
 
    var colCount = table.rows[1].cells.length; 
 
    var cell1 = row.insertCell(0); 
 
    cell1.innerHTML = rowCount; 
 
    for (var i = 0; i < colCount; i++) { 
 
    var newcell = row.insertCell(i + 1); 
 
    newcell.innerHTML = table.rows[1].cells[i + 1].innerHTML; 
 
    } 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td width="550"> 
 
     <p><strong>Content</strong> 
 
     </p> 
 
     </td> 
 
     <td width="50"> 
 
     <p align="center"><strong>CLO</strong> 
 
     </p> 
 
     </td> 
 
     <td width="50"> 
 
     <p align="center"><strong>PLO</strong> 
 
     </p> 
 
     </td> 
 
     <td width="60"> 
 
     <p align="center"><strong>Weeks</strong> 
 
     </p> 
 
     </td> 
 
    </tr> 
 
    <tr id="module"> 
 
     <td colspan="4" style="width:710; background-color:#A7B8D4; color:white;"> 
 
     <p class="modulenum"><strong align="center">MODULE 1</strong> 
 
     </p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td valign="top" width="550"> 
 
     <p> 
 
      <input type="text" value="" maxlength="255" class="textborder" class="table" id="dataTable2" /> 
 
     </p> 
 
     </td> 
 
     <td width="50"> 
 
     <p align="center"> 
 
      <input type="text" value="" maxlength="255" class="textbordersmall" /> 
 
     </p> 
 
     </td> 
 
     <td width="50"> 
 
     <p align="center"> 
 
      <input type="text" value="" maxlength="255" class="textbordersmall" /> 
 
     </p> 
 
     </td> 
 
     <td width="60"> 
 
     <p align="center"> 
 
      <input type="text" value="" maxlength="255" class="textbordersmall" /> 
 
     </p> 
 
     </td> 
 
    </tr> 
 
    <tr style="border:0px;"> 
 
     <p> 
 
     <input type="button" value="Add row" onclick="addRow1('dataTable2')">&nbsp; &nbsp; 
 
     <input type="button" value="Add Module" onclick="addRow1('dataTable2')"> 
 
     </p> 
 
     <br> 
 
     <br> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<p>&nbsp;</p> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table>

我希望当上添加模块按钮，用户点击就会重复模块行并增加其数量。但是，当点击添加行按钮时，它只是用它的文本框重复行。

Answer 1

的问题：

• 的按钮被调用错误的函数名addRow1而不是addRow
• 你是传递一个ID的功能，但该表没有一个

我已经修复了这些，并整理了代码https://jsfiddle.net/0L4yy5rr/1/

Answer 2

我对你的这个小修改做了代码,,看看，希望帮助你：

function mirko(tableID){ 
 
    var table=document.getElementById(tableID) 
 
    for(var l = 0; l < 2; l++){ 
 
\t  var cl = table.tBodies[0].rows[l].cloneNode(true) 
 
\t  table.tBodies[0].appendChild(cl) 
 
    } 
 
}

<a type="button" value="Add row" onclick="mirko('dataTable2');">Add row</a> 
 

 
<table id="dataTable2"> 
 
\t \t <thead> 
 
\t \t \t <td width="550"> 
 
\t \t \t \t <p> <strong>Content</strong> 
 
\t \t \t \t </p> 
 
\t \t \t </td> 
 
\t \t \t <td width="50"> 
 
\t \t \t \t <p align="center"> <strong>CLO</strong> 
 
\t \t \t \t </p> 
 
\t \t \t </td> 
 
\t \t \t <td width="50"> 
 
\t \t \t \t <p align="center"> 
 
\t \t \t \t \t <strong>PLO</strong> 
 
\t \t \t \t </p> 
 
\t \t \t </td> 
 
\t \t \t <td width="60"> 
 
\t \t \t \t <p align="center"> 
 
\t \t \t \t \t <strong>Weeks</strong> 
 
\t \t \t \t </p> 
 
\t \t \t </td> 
 
\t \t </thead> 
 
\t <tbody> 
 
\t \t <tr id="module"> 
 
\t \t \t <td colspan="4" style="width:710; background-color:#A7B8D4; color:white;"> 
 
\t \t \t \t <p class="modulenum"> 
 
\t \t \t \t \t <strong align="center">MODULE 1</strong> 
 
\t \t \t \t </p> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td valign="top" width="550"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t <input type="text" value="" maxlength="255" class="textborder" class="table" /> 
 
\t \t \t \t </p> 
 
\t \t \t </td> 
 
\t \t \t <td width="50"> 
 
\t \t \t \t <p align="center"> 
 
\t \t \t \t \t <input type="text" value="" maxlength="255"   class="textbordersmall"/> 
 
\t \t \t \t </p> 
 
\t \t \t </td> 
 
\t \t \t <td width="50"> 
 
\t \t \t \t <p align="center"> 
 
\t \t \t \t \t <input type="text" value="" maxlength="255"  class="textbordersmall"/> 
 
\t \t \t \t </p> 
 
\t \t \t </td> 
 
\t \t \t <td width="60"> 
 
\t \t \t \t <p align="center"> 
 
\t \t \t \t \t <input type="text" value="" maxlength="255" class="textbordersmall"/> 
 
\t \t \t \t </p> 
 
\t \t \t </td> 
 
\t \t </tr> \t \t \t 
 
\t </tbody> 
 
</table>

Answer 3

我解决我的问题，但存在计数模块排当用户删除模块行再加入另外一个它继续计数另一个问题如用户删除模块2再添加模块排它必须是2，但添加模块3.

<html> 
<head> 
<style type="text/css"> 
table {border-collapse:collapse;} 
.tf{border-bottom:0;} 
</style> 
<SCRIPT TYPE="text/javascript"> 
var num=1; 
    function addmodule(in_tbl_name) 
    { 
    var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0]; 
var row1 = document.createElement("TR"); 
// create table cell 1 
var td = document.createElement("TD") 
td.setAttribute('colspan',5); 
td.bgColor="#A7B8D4"; 
td.innerHTML = "<label style=\"width:570; background-color:#A7B8D4; color:white;\">"+"Module "+num+"</label>"; 
row1.appendChild(td); 
// add to count variable 
num = parseInt(num) + 1; 
// append row to table 
tbody.appendChild(row1); 
    } 
    var count=1; 
    function addRow(in_tbl_name) 
    { 
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0]; 
// create row 
var row = document.createElement("TR"); 
var td1 = document.createElement("TD") 
var strHtml1 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textborder\';\">"; 
td1.innerHTML=strHtml1 ; 
var td2 = document.createElement("TD") 
var strHtml2 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"30\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">"; 
td2.innerHTML=strHtml2; 
var td3 = document.createElement("TD") 
var strHtml3 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">"; 
td3.innerHTML=strHtml3 ; 
var td4 = document.createElement("TD") 
var strHtml4 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">"; 
td4.innerHTML=strHtml4 ; 
// append data to row 
row.appendChild(td1); 
row.appendChild(td2); 
row.appendChild(td3); 
row.appendChild(td4); 
// add to count variable 
count = parseInt(count) + 1; 
// append row to table 
tbody.appendChild(row); 
    } 
    function deleterow(tableID) { 
var table = document.getElementById(tableID); 
var rowCount = table.rows.length; 
if (rowCount==1) {return false; 
} 
else{ 
table.deleteRow(rowCount -1); 
}} 
</SCRIPT> 
</head> 
<body> 
<TABLE ID="tbl" width="570" border="1" cellspacing="0" cellpadding="0" align="center" class="st"> 
<TH WIDTH="400">Content</TH><TH WIDTH="57">CLO</TH><TH WIDTH="57">PLO</TH>  <TH WIDTH="56">Week</TH> 
<p align="center"> 
<input type="button" onClick="addmodule('tbl')" VALUE="Add Module"> &nbsp;&nbsp; 
<INPUT TYPE="Button" onClick="addRow('tbl')" VALUE="Add Row">&nbsp;&nbsp; 
<INPUT TYPE="Button" onClick="deleterow('tbl')" VALUE="delete Row"> </p>&nbsp;&nbsp; 
</TABLE> 
</body> 
</html>