javascript - rowIndex 返回 -1

Question

我正在使用 greasemonkey 脚本并使用以下代码更新表格。我附上了 table 的图片。但是当我点击 delete 时，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] );

似乎更合适。