通过单击按钮添加行答案

【问题标题】：Add row by clicking on button通过单击按钮添加行
【发布时间】：2017-07-16 00:48:02
【问题描述】：

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

 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>

我希望当用户单击“添加模块”按钮时，它会重复模块行并增加其编号。但是当点击添加行按钮时，它只是重复行及其文本框。

【问题讨论】：

它可能无法解决问题，但是您关闭了两次表。

标签： javascript html function html-table row

【解决方案1】：

问题：

按钮调用了错误的函数名称 addRow1 而不是 addRow
您将 id 传递给函数，但表没有 id

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

【讨论】：

它不起作用可能只是增加没有行或模块的数量

【解决方案2】：

我对你的代码做了一点修改，看看，希望对你有帮助：

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>

【讨论】：

一些功能可能有效，但我想要单独的两个按钮，其中一个用于添加模块并增加模块数量，另一个用于添加行
我解决了我的代码，但是当我删除行然后添加另一个从头开始计数的行时出现了一个小问题。你会在我的代码中看到
你能把困扰你的删除代码发给我吗？
是的，但是在添加行然后添加模块行时计算模块编号存在问题
您可以尝试使用例如：仅设置模块函数以在该行上添加类，如下所示：row1.className = 'module'; 并在函数开始时仅计算该行.. 像这样： document.getElementsByClassName('module').length .. 很抱歉，您将深入解决您的问题！

【解决方案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>

【讨论】：