复制设计HTML的表格行

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (176)

我希望你点击“创建行”的那一刻,第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>

功能下降

提问于
用户回答回答于

您的代码中存在一些问题。

  • 首先,HTML ID必须是唯一的。您正在使用多个相同的ID。
  • 某些输入字段具有相同的名称。这不一定是一个问题,但是,许多服务器端脚本语言(例如PHP)只是覆盖多个用法并只公开最后一个。如果你使用像这样的名字,PHP形成数组<input name="firstname[]">
  • <title>My Title</title>HTML5中必须使用非空标记。

更多

  • 文档应声明它们编码的字符集。
  • 拥有<html>lang属性的标记始终是个好主意。
  • 避免使用内联样式。请改用样式表。
  • 内联事件处理程序就像onclick是老派。改为应用事件监听器。
  • <div>细胞中存在语义无意义的元素。
  • <fieldset>仅包含一个字段的元素不具有语义意义,尤其是当它们分成两个相关日期时。在同一单元格中包含两个日期的字段集可能有意义。如果需要,可以使用css outline或类似物来获得视觉效果。

要获取另一行的副本,可以使用该cloneNode方法。

可以使用确定行数table.rows.length。您可以使用它来填充“数量计数”单元格。

如果由于某种原因确实需要ID,则每个文档必须是唯一的。这意味着,即使每行都需要不同的ID。复制时,您必须以某种方式更改ID - 例如,附加行号。

我添加了一些演示<label>只是为了说明如何更改必要的ID和标签的for属性,该属性连接到相应表单字段的ID。当然,带有标题的列中的标签并不真正有意义 - 它仅用于教学目的。

复制第一行可能是一个糟糕的选择,因为输入的值也会被复制。更常见的是复制最后输入的行。但是,还有另一种选择。您可以使用干净的模板。<template>元素不是由浏览器呈现的,因此它们不是DOM的一部分。您可以通过content酒店获得类似DOM的访问权限。

document.addEventListener('DOMContentLoaded', evt =>
{
  const
    minRowsPreserved = 2,
    byId             = document.getElementById.bind(document)
  ;

  function myCreateFunction()
  {
    let
      table    = byId("myTable"),
      rowCount = table.rows.length,
      row      = byId('tpl-row').content.firstElementChild.cloneNode(true)
    ;

    // In case you need IDs: Append the row number seperated by '-' to each ID since IDs must be unique.
    row.querySelectorAll('[id]').forEach(e => e.id += '-' + rowCount);
    // Similar for clickable labels depending on IDs, however, there is no shortcut for the `for` attribute.
    row.querySelectorAll('label[for]').forEach(e => e.setAttribute('for', e.getAttribute('for') + '-' + rowCount));
    // Content of the last cell becomes the row number.
    row.cells[row.cells.length-1].textContent = rowCount;
    // now we append the row to the table body after id-conflicts should be resolved
    table.tBodies[0].appendChild(row);
  }

  function myDeleteFunction() {
    let table = byId("myTable");
    if(minRowsPreserved < table.rows.length)
      table.deleteRow(-1);
  }

  byId('btn-create').addEventListener('click', myCreateFunction);
  byId('btn-delete').addEventListener('click', myDeleteFunction);

  // add a first row on start
  myCreateFunction();
})

#myTable
{
  font-size    : 12px;
  font-family  : Arial;
  border       : 1px solid black;
  text-align   : center;
  margin-bottom: 2em;
}

#myTable td
{
  border : 1px solid black;
  padding: 0.4rem;
}

#myTable th
{
  text-align: right;
}

#myTable input,
#myTable select
{
  font  : 12px 'Fira Sans', sans-serif;
}

#myTable input[type="text"]   { text-align     : right;  }
#myTable input[type="number"] { text-align-last: center; }
#myTable select               { text-align-last: right;  }

#myTable input[type="date"]   { width          : 113px;  }
.num1       input             { width          : 31px;   }
.first-name input             { width          : 55px;   }
.last-name  input             { width          : 52px;   }

<!DOCTYPE html>
<html lang="he">
<head>
  <meta charset="UTF-8">
  <title>dynamic table form</title>

<body>

  <form method="post">

    <table id="myTable" class="table table-bordered table-hover">

      <thead>
        <tr>
          <th>השתתפות / שוברים</th>
          <th>סכ"ה ימים</th>
          <th>עד תאריך</th>
          <th>מתאריך</th>
          <th>שם משפחה</th>
          <th>שם פרטי</th>
          <th>מ.א</th>
          <th>number count</th>
        </tr>
      </thead>

      <tbody>
      </tbody>

    </table>
  </form>

  <button id="btn-create">Create row</button>
  <button id="btn-delete">Delete row</button>

  <template id="tpl-row">
    <tr class="warning">
      <td class="car">
        <select id="car" name="car[]" style="width: 94px; text-align-last: right;">
          <option value="volvo">השתתפות</option>
          <option value="saab">שוברים</option>
        </select>
      </td>
      <td class="num1"      >  <input type="number" id="num1"       name="num1[]"      >  </td>
      <td class="trip-start">  <input type="date"   id="trip-start" name="tripstart[]" >  </td>
      <td class="trip-end"  >  <input type="date"   id="trip-end"   name="tripend[]"   >  </td>
      <td class="first-name">  <input type="text"   id="first-name" name="firstname[]" >  </td>
      <td class="last-name" >  <input type="text"   id="last-name"  name="lastname[]"  >  </td>
      <td class="check">
        <label for="num2">demo label:</label>
        <input type="number" id="num2" name="num2[]" style="width: 64px; text-align-last: center;">
      </td>
      <td></td>
    </tr>
  </template>
用户回答回答于

一个快速简单的解决方案(虽然可能不是长期使用的最佳选择)是有一个称为“深度”的全局变量,let depth = 0每当你添加一行时启动它depth++;,如果你删除一行只让它删除它if(depth >= 0)那么你永远不会删除已经存在的起跑线。

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

扫码关注云+社区

领取腾讯云代金券