Question

我有一个表格，我可以在其中添加文字。每一行都存储在一个数组中。

1行= 1个数组

该表是一个二维数组。

var table = [[1,2,3,4,5], [9,9,9,9,9]];

看看这张照片：

enter image description here

第一行是table [0]

[1,2,3,4,5]

，第二个是表格1

[9,9,9,9,9]

现在我有一个按钮，允许我向表中添加5个元素（1个新行）。

并通过推送将其添加到数组表[]中。所以如果我在我的数组中添加5个东西。例如，数字7,7,7,7,7。它看起来像这样：

table = [[1,2,3,4,5], [9,9,9,9,9], [7,7,7,7,7]];

现在，我有一个删除按钮，允许我删除表格中的行。

这是我的代码。它会删除我的按钮所在的行：

var tableCell = document.createElement("td");           
            var newButton = tableCell.appendChild(document.createElement("button"));
            var buttonText = document.createTextNode("Remove");

        // THIS FUNCTION DELETES THE ROW
            newButton.onclick = function() { 



  //BEFORE I DELETE THE ROW, I WANT TO DELETE THE INDEX IN THE ARRAY TOO
//...........
                (this).closest('tr').remove();
            };

            newButton.appendChild(buttonText);
            ...

现在我想知道，我怎样才能删除数组中的行？我必须找到一些如何找到我所在的行号，然后从我的数组中删除它。

如果我在图片（9,9,9,9,9）的第2行，即索引1。

然后点击＆＃34;删除＆＃34;，我希望它删除我的数组中的索引1。

但是如何找到要删除的索引？我尝试过rowIndex，但我不知道如何使用它...

table.splice(INDEX OF ROW,1)

如何找到我点击的按钮位于哪一行？然后用它来做类似的事情：

table.splice(1,1)

这将从我的2d数组中的索引1中删除1个数组

Answer 1

创建按钮时，添加“myid [ROWNUMBER]”的ID。在事件监听器中，您可以执行类似

的操作

 var value = parseInt((thid.id).replace('myId',''));

然后你可以从你的数组中拼接出来。

Answer 2

您实际上似乎正在使用 IE 不支持的Element.closest和node.remove。

要查找<tr>的索引，您可以获取它的兄弟<tr>，然后在其中查找

以下是使用Array.prototype.filter和Array.prototype.indexOf

执行此操作的方法

var tr = this.closest('tr'),
    idx = Array.prototype.filter.call(this.parentNode.children, function (e) {return e.tagName === 'TR'}).indexOf(this);

tr.remove();
table.splice(idx, 1);

请注意，如果您需要的数量超过直接兄弟姐妹，例如，这可能无法达到预期效果，例如：你使用了很多<tbody> s

Answer 3

如果按钮是行中TD的直接子项，那么在事件处理程序按钮中，如果性能没有问题，那么这样的事情应该有效...

  newButton.onclick = function() { 
    // ....
    var row = this.parentNode.parentNode, 
    rows = row.parentNode.querySelectorAll("tr"),
    index = 0;
    for( var r=0; r<rows.length; r++) {
        if(row==rows[r]) {
            index = r;
            break;
        }
    }
    console.log(index); // remove this index from array

测试http://jsfiddle.net/11p3tt0n/

Answer 4

Methink最简单的解决方案是使用rowIndex属性，如

function createButton() {
  var btn = document.createElement('button');
  btn.type = 'button';
  btn.appendChild(document.createTextNode('Remove'));
  btn.onclick = function() {
    var row = this.closest('tr');
    table.splice(row.rowIndex,1);
    row.remove();
    printTable(table);
  }
  return btn;
}

var table = [
  [1, 2, 3, 4, 5],
  [9, 9, 9, 9, 9]
];

var t = document.getElementById('table');
var b = document.getElementById('add');
b.onclick = function() {
  var num = parseInt(Math.random() * 10),
    row = [num, num, num, num, num];

  table.push(row);
  createRow(t, row);
  printTable(table);
};

function printTable(t) {
  var tjson = document.getElementById('tablejson');
  tjson.innerHTML = JSON.stringify(t);
}

printTable(table);

function createButton() {
  var btn = document.createElement('button');
  btn.type = 'button';
  btn.appendChild(document.createTextNode('Remove'));
  btn.onclick = function() {
    var row = this.closest('tr');
    table.splice(row.rowIndex,1);
    row.remove();
    printTable(table);
  }
  return btn;
}

function createRow(table, cells) {
  var row = table.insertRow();
  cells.forEach(function(el) {
    var cell = row.insertCell();
    cell.innerHTML = el;
  });
  var btnCell = row.insertCell();
  btnCell.appendChild(createButton());
}

table.forEach(function(row) {
  console.log(t, row);
  createRow(t, row);
});

<table id="table">
</table>
<button id='add'>Add</button>
<pre id="tablejson"></pre>

Javascript - 根据行索引

4 个答案: