如何使用Javascript获取行位置？

Question

I have a little problem... In my PHP-Code the user should be able to add a row to a HTML-Table by clicking on a button on the right side of the row. Then the new row should be displayed under the row, where the button is shown. To do that, I need to get the row-positon, but I don't know how.

I've tried this:

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>

Can you please help me with that?

Another problem is, that the content of cell4 does not show up. Thank you all very much.

</div>

Answer 1

There are a few different ways to solve this. One quite simple way would be to add an ID to the row you've just inserted and then pass that to the innerHTML you're creating:

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);
}

You can also access the rows of your table at any time using the rows property after you access the table. You can iterate over the rows and compare their data with what you're looking for.

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