Question

我正在尝试创建一个按钮来放入表格的每一行以删除该行

它自己的表行将由运行时的javascript创建

function createrow(){

   document.getElementById('totaltd').innerHTML = total;

   var table = document.getElementById('baskettbl');
   var rowCount = table.rows.length;
   var row = table.insertRow(rowCount);
   var cell2 = row.insertCell(0);
   cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return   false;">deleterow</a>';

   var cell2 = row.insertCell(1);
   cell2.innerHTML='price';

   var cell3 = row.insertCell(2);
   cell3.innerHTML='name';

}

这是我的删除行功能

function removerow(i){      
    var table = document.getElementById('baskettbl');
    table.deleteRow(i);
 }

我的问题是，当我删除一行时，如果该行位于我的表中间，它会搞乱索引，因为我创建每行时定义了removerow参数

   var rowCount = table.rows.length;
   var row = table.insertRow(rowCount);
   var cell2 = row.insertCell(0);
   cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return false; />

就像我有5行并且我删除了行[3]我将最终得到4行，但我的最后一行按钮仍然会传递5到removerow函数，当然没有行[5] < / p>

所以我认为我应该通过简单的

来索引所有行

 function removerow(i){

     var table = document.getElementById('baskettbl');
        table.deleteRow(i);
     }
     var rowCount = table.rows.length;

      for(i=0 , i<= rowCount ; i++){
     var cell = 'cell'+i;
      cell.innerHTML='<a href="" onclick="removerow('+0+'); return false; />  
      }

但我需要在数字乳清中设置td id，这样我就可以像这样更改它们的innerhtml 所以这是我的问题：

1.如何将我喜欢的属性设置为创建的td，以便我可以在以后获取它们的值？这是我如何创建它们

var cell2 = row.insertCell(0);

2.i找出有关rowIndex属性的信息，它显然返回了行索引

功能removerow（x） { alert（“行索引是：”+ x.rowIndex）; } 所以这将使我的工作变得简单，我不需要重新创建所有索引，但我如何将点击的行'this'传递给函数？这是我如何通过索引

var cell2 = row.insertCell(0);
cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); />

我也使用Dreamweaver cs5，它似乎无法识别rowIndex

Answer 1

然后动态获取索引，并在创建时不要设置它：

function createrow(){  
   document.getElementById('totaltd').innerHTML = total;

   var table = document.getElementById('baskettbl'),
       rowCount = table.rows.length,
       row = table.insertRow(rowCount),
       cell = row.insertCell(0),
       a = document.createElement('a');

   a.href = '#';
   a.innerHTML = 'deleterow';
   a.onclick = function() {
       // `this` refers to the `a` element.
       removerow(this.parentNode.parentNode.rowIndex);
       return false;
   };

   cell.appendChild(a);

   cell = row.insertCell(1);
   cell.innerHTML='price';

   cell = row.insertCell(2);
   cell.innerHTML='name';

   // still needed for IE memory leak? Don't know...
   table = row = cell = a = null;
};

无论如何，通过JavaScript设置click事件处理程序更具可读性（嗯，您也可以在HTML字符串中使用this.parentNode....）。

上面的代码应该做你想要的（如果你对它有疑问，只需评论）。不过我想回答你的问题：

如何将id这样的属性设置为创建的td，以便我可以在以后获取它们的值？

重要的是要知道 HTML属性和 DOM属性之间存在差异。 These answers describe it quite well，虽然它最初是关于jQuery的（但这并不重要）。

无论如何，您已经知道如何设置innerHTML并且id可以这样做：

cell.id = "something";

查看DOM element reference。

但是如何将点击的行'this'传递给函数

我或多或少在上面的代码中展示了这一点。在事件处理程序内，this引用您绑定事件的元素。我们知道它是a元素，它是td元素的子元素，它本身是tr元素的子元素。因此，要获取相应的行，我们可以访问this.parentNode.parentNode。

有关JavaScript的更多信息，请have a look at the javascript tag information page。在那里，您将找到许多有关各种JavaScript相关主题的介绍的有用链接特别要看看articles about event handling at quirksmode.org。

Answer 2

试试这个我希望这可以帮助你。

 function createrow(){

       document.getElementById('totaltd').innerHTML = total;

       var table = document.getElementById('baskettbl');
       var rowCount = table.rows.length;
       var row = table.insertRow(rowCount);
       row.id = "row_"+rowCount;
       var cell2 = row.insertCell(0);
       cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return   false;">deleterow</a>';

       var cell2 = row.insertCell(1);
       cell2.innerHTML='price';

       var cell3 = row.insertCell(2);
       cell3.innerHTML='name';

    }




function removerow(i){      
    var table = document.getElementById('baskettbl');
    table.removeChild(document.getElementById("row_"+i));
 }

从表中删除一行并重新索引表

2 个答案: