Javascript - 根据行索引删除数组索引

Question

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

1 行 = 1 个数组

表格是一个二维数组。

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

看这张图：

第一行是table[0]

[1,2,3,4,5]

第二个是table1

[9,9,9,9,9]

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

这是通过推送添加到数组 table[] 中的。 所以如果我在我的数组中添加 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。

然后我点击“删除”，我希望它删除我数组中的索引 1。

但是我怎样才能找到要删除的索引？ 我尝试了 rowIndex，但我不知道如何使它与它一起工作......

table.splice(INDEX OF ROW,1)

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

table.splice(1,1)

这会从我的二维数组的索引 1 中删除 1 个数组

Answer 1

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

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

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

Answer 2

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

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

以下是使用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

我认为最简单的解决方案是使用 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>