点击按钮添加行

Question

I have table with two buttons to add different rows and I tried this code but it doesn't work. 我有带有两个按钮的表，用于添加不同的行，并且尝试了此代码，但它不起作用。 This is my script code: 这是我的脚本代码：

  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>

I want when user click on Add Module button it will repeat module row and increment its number. 我想要当用户单击“添加模块”按钮时，它将重复模块行并增加其编号。 But when click on Add row button it's only repeat row with its textboxes. 但是，当单击“添加行”按钮时，只有带有文本框的重复行。

Answer 1

The issues: 问题：

The buttons were calling the wrong function name addRow1 instead of addRow 这些按钮分别致电了错误的函数名addRow1代替addRow
You were passing an id to the function, but the table didn't have one 您正在向该函数传递一个id，但是该表没有一个

I've fixed these, and tidied up the code at https://jsfiddle.net/0L4yy5rr/1/ 我已经修复了这些问题，并在https://jsfiddle.net/0L4yy5rr/1/整理了代码

Answer 2

I did this little modification to your code,, take a look, hope that helps you: 我对您的代码做了一些小的修改，请看一下，希望对您有所帮助：

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

 <a type="button" value="Add row" onclick="mirko('dataTable2');">Add row</a> <table id="dataTable2"> <thead> <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> </thead> <tbody> <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" /> </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> </tbody> </table>

Answer 3

I solved my problem but there is another problem in counting module row when user delete module row then add another one it continues counting like user delete module 2 then add module row it must be 2 but add module 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>

在此处输入图片说明

点击按钮添加行

问题描述

3 个解决方案

解决方案1
0 2015-04-17 21:36:08

解决方案2
0 2015-04-17 22:02:55

解决方案3
0 2015-04-21 19:44:55

点击按钮添加行

问题描述

3 个解决方案

解决方案1 0 2015-04-17 21:36:08

解决方案2 0 2015-04-17 22:02:55

解决方案3 0 2015-04-21 19:44:55

解决方案1
0 2015-04-17 21:36:08

解决方案2
0 2015-04-17 22:02:55

解决方案3
0 2015-04-21 19:44:55