如何使用 Javascript 获取行位置？答案

【问题标题】：How can I get the row-position with Javascript?如何使用 Javascript 获取行位置？
【发布时间】：2016-03-20 03:17:28
【问题描述】：

我有一个小问题... 在我的 PHP 代码中，用户应该能够通过单击行右侧的按钮将行添加到 HTML 表中。然后新行应显示在显示按钮的行下方。为此，我需要获得行位置，但我不知道如何。

我试过了：

function deleteRow(rowNumber) {
    document.getElementById("Angebotsformular").deleteRow(rowNumber);
}

function addRow(rowNumber) {
            var table = document.getElementById("Angebotsformular");
            var row = table.insertRow(rowNumber);  //THIS IS THE VALUE I NEED TO FIND
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);

            var posnr = document.createElement("input"); 
            var posorder = document.createElement("input"); 
            var unit = document.createElement("input"); 

            posnr.type = "text";
            posnr.name = "position";
            posnr.size = 6;
            posorder.type = "text";
            posorder.name = "order";
            posorder.size = 6;
            unit.type = "text";
            unit.name = "unit";
            unit.size = 6;
            
            cell1.appendChild(posnr);
            cell2.appendChild(posorder);
            cell3.appendChild(unit);
            cell4.innerHTML('<span onclick="hinzufuegen();">Add</span><span onclick="loeschen();">Remove</span>');

        }

 <tr>
            <td><input type="text" size="6" id="position"></td>
            <td><input type="text" size="6" id="order"></td>
            <td><input type="text" size="6" id="unit"></td>
            <td><span onclick="addRow(this);">Add</span><span onclick="deleteRow(this);">Remove</span></td>
        </tr>

你能帮我解决这个问题吗？

另一个问题是，cell4 的内容没有显示出来。非常感谢大家。

【问题讨论】：

您可以使用对按钮的引用来查找行（父级的父级），然后在其后插入新行。像button.parent.parent.insertAdjacentHTML('afterend', newRowHtmlString) 这样的东西。这里的“按钮”是您在“addRow”函数（对按钮的引用）中所称的“rowNumber”，而“newRowHtmlString”是新行的 HTML
innerHTML 是一个属性，而不是一个方法。使用= 设置其值应该有助于显示cell4 的值。
这看起来是一个很好的解决方案，但我没有得到它的工作。我必须像这样使用它吗？ var row = table.arg.parent.parent.insertAdjacentHTML('afterend', newRowHtmlString);

标签： javascript php html-table

【解决方案1】：

有几种不同的方法可以解决这个问题。一种非常简单的方法是将 ID 添加到您刚刚插入的行中，然后将其传递给您正在创建的 innerHTML：

var table = document.getElementById("Angebotsformular");
var row = table.insertRow(rowNumber);
row.id = 'table_row_1';
// Rest of your code...

cell4.innerHTML = '<span onclick="remove(' + row.id + ');">';

// elsewhere...
function remove(rowId) {
    var rowToDelete = document.getElementById(rowId);
}

您还可以在访问表后随时使用 rows 属性访问表中的行。您可以遍历行并将其数据与您要查找的数据进行比较。

document.getElementById('Angebotsformular').rows // this is an array

【讨论】：

【解决方案2】：

我自己找到了一个非常简单的方法：

   function add(arg,pos) {
            alert((arg.parentNode.parentNode.rowIndex)+pos);
            arg = (arg.parentNode.parentNode.rowIndex)+pos;
            var table = document.getElementById("Angebotsformular");
            var row = table.insertRow(arg);
     
     // and the rest of the code
     
     }

<span onclick="add(this, 0);">above</span></br>
<span onclick="add(this, 1);">below</span></br>

我只是不知道“.rowIndex”-Part。

【讨论】：