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

Posted 2023-03-15

【中文标题】Javascript - 根据行索引删除数组索引

【英文标题】：Javascript - remove array index depending on row index

【发布时间】：2015-07-19 15:07:27

【问题描述】：

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

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 个数组

【问题讨论】：

你用的是最接近的？是this 还是jQuery？您能提供如何通过数组创建 html 表吗？

不是 jquery @Grundy 我在这里找到了 ***.com/questions/11553768/…。我的问题是我只需要找到我的按钮所在的行。如果它在表中的 rowIndex 2 上，那么也删除我的数组中的索引 2

但通过链接使用 jquery :-D

我怎样才能删除行呢？奇怪的人.....因为，我不使用jquery，它删除了我的行lol

但是有什么方法可以找到我被点击的按钮所在的行？有没有办法做到这一点？ :S

【参考方案1】：

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

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

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

【讨论】：

所以当我添加一个按钮时：var button = cell.appendChild(document.createElement("button")); 然后我输入button.id = row[i]; 还是什么？然后该行位于 row[i] 内，如 row[3]。但我不明白我在哪里添加你的代码。在我删除该行之前？

【参考方案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

【讨论】：

我试过你的代码，但它仍然没有从数组中删除。当我按下删除按钮时，它会像以前一样删除整行。但是当我按下“添加行”按钮并添加新行时，旧行再次出现在顶部。就像它只是暂时删除一样。它仍然在某个数组中，因为那是我从中加载行的地方

【参考方案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/

【讨论】：

仍然对我不起作用。我正因为这个而精神崩溃。我做错了什么？`??

我更新了小提琴，检查控制台日志，它应该可以工作......也许你应该发布更多关于事件绑定代码的信息。 jsfiddle.net/11p3tt0n/1

【参考方案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>