javascript：在表

Question

我想在一个包含4个单元格的表中添加一行：indexnumber，firstname，lastname和points。作为Javascript中的新手，我完全迷失在文本节点，孩子和其他Dom元素中。谁可以帮助在第一列等中创建像1,2,3这样的动态索引号。

＆＃13;

＆＃13;

var button = document.getElementById("addRow");
button.onclick = addRowFunc;
    
var firstName = document.getElementById("firstN"); 
var lastName = document.getElementById("lastN");
var points = document.getElementById("pnt");
       
function addRowFunc() {
    var tabel = document.getElementById("myTable");
    var row = tabel.insertRow(-1);
    var cel1 = row.insertCell(0);
    var cel2 = row.insertCell(1);
    var cel3 = row.insertCell(2);
    var cel4 = row.insertCell(3);
    cel1.value = function () {
        for (var i = 1; i < rij.length; i++) {
            //createTextNode .. 
        }
    }
    
    cel2.innerHTML = firstName.value;
    cel3.innerHTML = lastName.value;
    cel4.innerHTML = points.value;
}

＆＃13;

<table id="myTable">
    <tr>
        <th>Rownumber</th>
        <th>FirstName</th>
        <th>LastName</th>
        <th>Points</th>
    </tr>

</table>
<br />
<br />
<br />
     FirstName <input type="text" id="firstN" /><br />
    LastName <input type="text" id="lastN" /><br />
    Points <input type="text" id="pnt" /> <br />
<br />
<button type="button" id="addRow">Add</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是获取节点和DOM工作方式的最简单方法：）

    var table = document.getElementById('myTable');
    var row = document.createElement('tr');
    var cell1 = document.createElement('td');
    var cell2 = document.createElement('td');
    var cell3 = document.createElement('td');
    var cell4 = document.createElement('td');

    cell1.innerHTML = '1';
    cell2.innerHTML = '2';
    cell3.innerHTML = '3';
    cell4.innerHTML = '4';

    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);

    table.appendChild(row);

所以让我们假设你有一个格式如下的数据数组：

data = [
    {
        indexNumber: 1,
        firstName: 'Bon',
        lastName: 'Jovi',
        points: 50,
    },
    {
        indexNumber: 2,
        firstName: 'Ann',
        lastName: 'Hathaway',
        points: 60,
    },
];

现在您可以在forEach周期中处理此数组：

var table = document.getElementById('myTable');

data.forEach(function(element) {
    var row = document.createElement('tr');
    var cell1 = document.createElement('td');
    var cell2 = document.createElement('td');
    var cell3 = document.createElement('td');
    var cell4 = document.createElement('td');

    cell1.innerHTML = element.indexNumber;
    cell2.innerHTML = element.firstName;
    cell3.innerHTML = element.lastName;
    cell4.innerHTML = element.points;

    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);

    table.appendChild(row);
});

Answer 2

您遇到的问题的一种方法，即显示表格行元素的数量可以使用CSS解决，具有以下规则：

tbody {
  counter-reset: rownumber;
}
tr {
  counter-increment: rownumber;
}
td:first-child::before {
  content: counter(rownumber, decimal);
}

上面定义了计数器rownumber，并通过<tbody>元素重置;因此，如果行附加在多个<tbody>元素上，则每个元素的<tr>后代将彼此独立编号。如果您希望连续统计所有<tr>元素，则只需将counter-reset规则移至<table>元素，或移至您所在的任何其他（最理想的最近可能）祖先需要累积计数。

此计数器在每个1元素中按<tr>递增，然后显示在每个::before的第一个<td>子元素的<tr>伪元素中1}}。 counter()的第二个参数是您希望使用的计数器类型（请参阅此答案以获取（当前）可能的选项：https://stackoverflow.com/a/16943843/82548（免责声明：这是我的答案之一，第二个代码段将允许您查看不同计数器类型的结果。）

所以，那部分我已经改写了 - 我想说修改或重构，但这最多只是轻描淡写 - 你的将代码发布到以下函数中。代码在评论中解释：

// a named function to call:
function addRow() {

  // using 'let' to declare variables, this is mostly a
  // matter of personal preference in this case, and if
  // 'let' is unavailable to you, or your users, can be
  // replaced with 'var'.

  // here we define a 'details' Object to hold the
  // variables from the <input> elements we find
  // later:
  let details = {},

  // we use document.querySelector() to retrieve the first,
  // if any, elements matching the supplied CSS selector;
  // this is the element to which new content will be added:
    target = document.querySelector('#myTable tbody'),

  // and again we use document.querySelector() to find the
  // element we'll be cloning in order to append the new
  // new content:
    source = document.querySelector('#myTable tfoot tr.template')
      // we pass (Boolean) true as an argument in order to copy
      // the descendants of the cloned node as well as the node
      // itself:
      .cloneNode(true),

    // here we use Array.from() to convert the Array-like
    // HTMLCollection returned from document.querySelectorAll()
    // (which retrieves all the elements which match the
    // supplied CSS selector) into an Array:
    inputs = Array.from(
      document.querySelectorAll('form label input')
    );

  // we make use of the Array, via Array methods such as,
  // here, Array.prototype.forEach(), which iterates over
  // the elements of the Array:
  inputs.forEach(

    // using an Arrow function, rather than the traditional
    // anonymous function; here 'input' refers to the current
    // Array element of the Array of <input> elements over
    // which we're iterating.

    // here we update the details Object, by adding a new
    // key (details[input.id]) and setting the value of that
    // key to the value (input.value) held in the <input>:
    input => details[input.id] = input.value
  );

  // here we convert the Array-like NodeList of child-
  // elements of the source (the <tr> element we cloned
  // earlier) into an Array, again using Array.from, and
  // then iterating over those elements using, again,
  // Array.prototype.forEach():
  Array.from(source.children).forEach(

    // in this Arrow function we're naming the
    // current Array-element 'cell', the name is
    // purely a personal choice, and can be almost
    // anything, so long as it's valid in JavaScript.

    // here we set the text-content of the current
    // cell (<td> element) to be equivalent to the
    // value held in the details Object at the same
    // custom data-* attribute, here data-from, as
    // the current <td> (details.cell.dataset.from);
    // if there is no key of that name, we set the
    // text to an empty String (''):
    cell => cell.textContent = details[cell.dataset.from] || ''
  );

  // we append the newly modified <tr> element to
  // the target element (the <tbody>):
  target.appendChild(source);

  // and here we iterate over the <input> elements:
  inputs.forEach(

    // and set the value of each <input> back to
    // its default value, the value it held on
    // page-load in order to save the user having
    // to first delete existing content before
    // entering new content to add:
    input => input.value = input.defaultValue
  );
}

document.querySelector('#addRow').addEventListener('click', addRow);

function addRow() {
  let details = {},
    target = document.querySelector('#myTable tbody'),
    source = document.querySelector('#myTable tfoot tr.template')
    .cloneNode(true),
    inputs = Array.from(
      document.querySelectorAll('form label input')
    );

  inputs.forEach(
    input => details[input.id] = input.value
  );

  Array.from(source.children).forEach(
    cell => cell.textContent = details[cell.dataset.from] || ''
  );

  target.appendChild(source);
  inputs.forEach(
    input => input.value = input.defaultValue
  );
}

document.querySelector('#addRow').addEventListener('click', addRow);

body {
  box-sizing: border-box;
}

label {
  display: block;
  width: 55%;
  overflow: hidden;
  margin: 0 0 0.5em 0;
}

table {
  table-layout: fixed;
  width: 90%;
  margin: 1em auto;
  border-collapse: collapse;
}

label input {
  width: 50%;
  float: right;
}

th,
td {
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  line-height: 2em;
  height: 2em;
}

th {
  text-align: center;
}

th::after {
  content: ': ';
}

td:first-child,
th:first-child {
  border-left-color: transparent;
}

tbody {
  counter-reset: rownumber;
}

tbody tr {
  counter-increment: rownumber;
}

tbody td:first-child::before {
  content: counter(rownumber, decimal);
}

tfoot tr.template {
  display: none;
}

<form action="#">
  <fieldset>
    <legend>Add new details:</legend>
    <label>FirstName
      <input type="text" id="firstN" />
    </label>
    <label>LastName
      <input type="text" id="lastN" />
    </label>
    <label>Points
      <input type="text" id="pnt" />
    </label>
    <button type="button" id="addRow">Add</button>
  </fieldset>
</form>
<table id="myTable">
  <thead>
    <tr>
      <th>Rownumber</th>
      <th>FirstName</th>
      <th>LastName</th>
      <th>Points</th>
    </tr>
  </thead>
  <tfoot>
    <tr class="template">
      <td></td>
      <td data-from="firstN"></td>
      <td data-from="lastN"></td>
      <td data-from="pnt"></td>
    </tr>
  </tfoot>
  <tbody>
  </tbody>
</table>

JS Fiddle demo

参考文献：

• CSS：
  • Automatic counters and numbering。
  • :first-child pseudo-class。
• JavaScript的：
  • Array.from()。
  • Array.prototype.forEach()。
  • Arrow functions。
  • document.querySelector()。
  • document.querySelectorAll()。
  • EventTarget.addEventListener()。
  • HTMLElement.dataset API。
  • Node.appendChild()。
  • let statement。
  • Node.cloneNode()。
  • `Node.textContent。
  • var statement。

Answer 3

插入新行使用追加

<table id="mytable">
<tr><td >1</td> <td >sd</td> <td >sd</td> <td >sd</td></tr>
<tr><td >2</td> <td >sd</td> <td >sd</td> <td >sd</td></tr>
<tr><td >3</td> <td >sd</td> <td >sd</td> <td >sd</td></tr>
</table>

用jquery

添加它

  var total_rows = $('#mytable tr').length;
     var new_row = parseInt(total_rows)+parseInt(1);
    var yourdata_variable = "<tr><td >"+new_row+"</td> <td >sd2</td> <td >sd2</td> <td >sd2</td></tr>";
    $('#mytable').append(yourdata_variable);

如果您只想使用javascript

var yourdata_variable = same as above;
var table = document.getElementById('mytable').append(yourdata_variable);

如果这是您想要的评论。