Question

此脚本仅创建一个带有内部函数的行，该函数之后应允许将其删除。一切正常，但是警报仅将-1值作为rowIndex发送。

我不明白我在做什么错，您能帮我吗？预先感谢

function newRow(tableID){
    var table = document.getElementById(tableID);
    table.insertRow(1);
    var row = "<tr><td><input type='text'><img src='x.png' onClick='cancRow($(this).closest(\"table\").attr(\"id\"))'></td></tr>";
    table.rows[1].innerHTML = row;
}

function cancRow(tableID){
    var row = $(this).closest("tr");
    var rowIndex = row.rowIndex();
    alert('tableID: ' + tableID + ' rowIndex: ' + rowIndex);
    //document.getElementById(tableID).deleteRow(rowIndex);
}

这是HTML代码：

<table id="abilitation">
  <tr>
    <td>Abilitations</td>
    <td><img src= "plus.png" onClick="newRow($(this).closest('table').attr('id'))"></td>
  </tr>                     
</table>

Answer 1

$(this)在您的函数中并未引用img，而是引用了window对象

要使用事件附加的元素，您需要在函数调用中发送event对象，然后使用event.target获取所需的元素。

如果要使用JQuery：您可以使用$(event.target).closest("tr").index() 要么 $(event.target).closest("tr").prop('rowIndex')获取行索引

function newRow(tableID){
    var table = document.getElementById(tableID);
    table.insertRow(1);
    var row = "<tr><td><input type='text'><img src='x.png' onClick='cancRow(event, $(this).closest(\"table\").attr(\"id\"))'></td></tr>";
    table.rows[1].innerHTML = row;
}

function cancRow(event, tableID){
    var row = event.target.closest("tr");
    var rowIndex = row.rowIndex;
    alert('tableID: ' + tableID + ' rowIndex: ' + rowIndex);
    document.getElementById(tableID).deleteRow(rowIndex);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my-table">
    <tr>
        <td><input type="text"><img src="x.png" onClick="cancRow(event, $(this).closest('table').attr('id'))"></td>
    </tr>
</table>
<button onclick="newRow('my-table')">Add row</button>

Answer 2

尝试一下

var row = $(this).closest("tr") ;
var rowIndex = row.index();

注意：索引从0开始

Answer 3

请尝试一下。

HTML：

function newRow(tableID) {
  debugger
  var table = $("#" + tableID + " tbody")
  var row = "<tr><td><input type='text'><img src='x.png' onClick='cancRow($(this).closest(\"table\").attr(\"id\"))'></td></tr>";
  table.append(row);
  //table.rows[1].innerHTML = row;

}


function cancRow(tableID) {
  debugger;
  var row = $("#" + tableID + " tbody").closest("tr");
  var rowIndex = $("#" + tableID + " tbody").find('tr').parent().index();
//for last index;  
 //$("#" + tableID + " tbody").find('tr').last().index();
  alert('tableID: ' + tableID + ' rowIndex: ' + rowIndex);
  //document.getElementById(tableID).deleteRow(rowIndex);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="t1">
  <tbody>

  </tbody>
</table>
<button onclick="newRow('t1')">new</button>
<button onclick="cancRow('t1')">del</button>

使用他的索引删除行

3 个答案: