rowIndex返回-1

Question

我正在使用greasemonkey脚本并使用以下代码更新表。我附上了桌子的图像。但是当我点击删除时，rowIndex为所有行返回-1。我不知道为什么它会返回-1。

table = document.getElementById( 'keys-table' );
if ( !table ) return;
table.innerHTML = '';


// header
row = document.createElement( 'tr' );
th = document.createElement( 'th' );
th.innerHTML = "Group"; row.appendChild( th );
th = document.createElement( 'th' );
th.innerHTML = "Key"; row.appendChild( th );
th = document.createElement( 'th' );
th.innerHTML = " "; row.appendChild( th );
table.appendChild( row );

// keys
for ( i = 0 ; i < keys.length ; i++ ) {
    row = document.createElement( 'tr' );
    td = document.createElement( 'td' );
    td.innerHTML = keys[i][0];
    row.appendChild( td );
    td = document.createElement( 'td' );
    td.innerHTML = keys[i][1];
    row.appendChild( td );
    td = document.createElement( 'td' );

    button = document.createElement( 'input' );
    button.type = 'button';
    button.value = 'Delete';
    button.addEventListener( "click", function(event) {
            DeleteKey( event.target.parentNode.parentNode.rowIndex,event.target);
        }, false );
    td.appendChild( button );
    row.appendChild( td );

    table.appendChild( row );
}

Answer 1

tr元素想要位于<tbody>元素中。

通常，浏览器会自动插入一个，但如果确实如此，则用...

擦除它

table.innerHTML = '';

如果您确保原始表格中有<tbody>，请执行此操作...

table = document.getElementById( 'keys-table' );
if ( !table ) return;

var tbody = table.tBodies[0];
tbody.innerHTML = '';

...然后将行追加到tbody，它会起作用。

---

旁注，但我个人建议使用DOM方法删除旧行而不是innerHTML。

var tbody = table.tBodies[0];
while( tbody.firstChild )
    tbody.removeChild( tbody.firstChild );

或

var tbody = table.tBodies[0];
while( tbody.rows[0] )
    tbody.deleteRow( tbody.rows[0] );

似乎更合适。

Answer 2

好问题，“我不是我”的答案是正确的，请确保在你的桌子上附上一个tbody，然后将你的行附加到这个人身上。