单击按钮添加行

时间：2015-04-17 20:12:48

标签： javascript html function html-table row

我有两个按钮来添加不同的行，我尝试了这个代码，但它没有用。 这是我的脚本代码：

＆＃13;
＆＃13; 
 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;
   }
 }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

3 个答案:

答案 0 :(得分：0)

问题：

  • 按钮调用了错误的函数名addRow1而不是addRow
  • 您正在将ID传递给该函数，但该表没有一个

我已经解决了这些问题，并在https://jsfiddle.net/0L4yy5rr/1/

处整理了代码

答案 1 :(得分：0)

我对你的代码进行了一些修改，看看，希望能帮到你：

＆＃13;
＆＃13; 
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 ) 
    }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我解决了我的问题，但是当用户删除模块行计算模块行时还有另一个问题，然后添加另一个继续计数，如用户删除模块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>

enter image description here

相关问题
最新问题