时间戳

首页 > 解决方案 > 复制设计 HTML 的表格行

javascript - 复制设计 HTML 的表格行

问题描述

我希望在您单击“创建行”的那一刻，第 2 行与格式规则重复：输入，选择 ..

除了第一列之外，我希望每次在“计数”中超过 +1 的计数。

一旦我点击删除行 - 它会让我删除除第 1 行之外的最后一行！

感谢帮助者！

这是代码：

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table id="myTable" class="table table-bordered table-hover" style="font-size: 12px; font-family: Arial;">
	  <thead>
		<tr>
		  <th style="text-align: right;">השתתפות / שוברים</th>
<th style="text-align: right;">סכ"ה ימים</th>
<th style="text-align: right;">עד תאריך</th>
<th style="text-align: right;">מתאריך</th>
		  <th style="text-align: right;">שם משפחה</th>
		  <th style="text-align: right;">שם פרטי</th>
		  <th style="text-align: right;">מ.א</th>
		  <th style="text-align: right;">number count</th>
		</tr>
	  </thead>
	  <tbody>
	
			<tr class="warning">
			  <td style="text-align: center;">
			  
			  <select style="font: 12px 'Fira Sans', sans-serif;width: 94px;margin: 0.4rem;text-align-last: right;">
  <option value="volvo">השתתפות</option>
  <option value="saab">שוברים</option>
  
  
</select>
  
			  
			  </td>
			  <td style="text-align: right;"><input type="number" id="fname2" name="firstname" style="font: 12px 'Fira Sans', sans-serif;width: 31px;margin: 0.4rem;text-align-last: center;"></td>
			  <td style="text-align: right;">
<fieldset>
    <div>
        <input type="date" name="trip" style="font: 12px 'Fira Sans', sans-serif;width: 113px;margin: 0.4rem;">
    </div>


</fieldset>
</td>
			  

<td style="text-align: right;">

<fieldset>
    <div>
        <input type="date" name="trip" style="font: 12px 'Fira Sans', sans-serif;width: 113px;margin: 0.4rem;">
    </div>


</fieldset>
</td><td style="text-align: right;">
<input type="text" id="fname2" name="firstname" style="font: 12px 'Fira Sans', sans-serif;width: 55px;margin: 0.4rem;text-align: right;">

</td>
<td style="text-align: right;">
<input type="text" id="fname2" name="firstname" style="font: 12px 'Fira Sans', sans-serif;width: 52px;margin: 0.4rem;text-align: right;">

</td><td id=check style="text-align: right;">
<input type="number" name="firstname" style="font: 12px 'Fira Sans', sans-serif;width: 64px;margin: 0.4rem;text-align-last: center;">
</td>
			  <td style="text-align: center;padding-top: 20px;">1
              </td>
			</tr>	
				  </tbody>
	</table>
<br><br>

<p id="demo" onclick="myCreateFunction()">Create row</p> <br>
<p id="demo" onclick="myDeleteFunction()">Delete row</p>


<script>
function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(0);
    var cell3 = row.insertCell(0);
    var cell4 = row.insertCell(0);  
    var cell5 = row.insertCell(0); 
    var cell6 = row.insertCell(0); 
    var cell7 = row.insertCell(0); 
    var cell8 = row.insertCell(0);
    cell1.innerHTML =  1;
    cell2.innerHTML = 2;
    cell3.innerHTML = 3;
    cell4.innerHTML = 4;
    cell5.innerHTML = 5;
    cell6.innerHTML = 6;
    cell7.innerHTML = 7;
    cell8.innerHTML = 8;
}

function myDeleteFunction() {
    document.getElementById("myTable").deleteRow(-1);
}


</script>

</body>
</html>

功能下降

标签： javascripthtml

解决方案

一个快速简便的解决方案（尽管可能不是长期使用的最佳选择）是有一个名为“深度”之类的全局变量，let depth = 0每次添加一行时都启动它depth++;，如果删除一行，只让它删除该行if(depth >= 0)那么您将永远不会删除已经存在的起跑线。

另一种方法，如果这是一个更大的项目，可能更具可扩展性，是跟踪数组中的行数，每次添加一行时，arr.push(line);当你删除一行时arr.splice(indexofline,1);，你就可以不仅可以跟踪您所在的行，还可以推送有关您可以在以后的代码中用于扩展程序的行的信息。

推荐阅读