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

我试图创建一个按钮，将其放在表的每一行中，以删除该行

它自己的表行将由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';

}

我的问题是当我删除一行时，如果该行位于我的表中间，它会使索引混乱，因为当我创建每行< /p>时，我定义了ReleWrof参数。

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

2.我发现了rowIndex属性，它显然返回了行索引

函数（x） { 警报（“行索引为：”+x.rowIndex）； } 因此，这将使我的工作变得简单，我不需要重新创建所有索引，但如何将单击的行“this”传递给函数？下面是我如何传递索引的

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

var cell2=row.insertCell（0）；
cell2.innerHTML='试试这个我希望它能帮助你

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

函数createrow（）{
document.getElementById（'totaltd'）。innerHTML=total；
var table=document.getElementById（'baskettbl'）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
row.id=“row_u3;”+行计数；
var cell2=行插入单元格（0）；
cell2.innerHTML=''；
var cell2=行插入单元格（1）；
cell2.innerHTML='price'；
var cell3=行插入单元格（2）；
cell3.innerHTML='name'；
}
函数（i）{
var table=document.getElementById（'baskettbl'）；
表.removeChild（document.getElementById（“行”+i））；
}
然后动态获取索引，在创建索引时不要进行设置：

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属性之间存在差异，虽然它最初是关于jQuery的（但这并不重要）

无论如何，您已经知道如何设置
innerHTML
，并且可以对
id
进行类似的设置：

cell.id = "something";

看一看这张照片

但是如何将单击的行“this”传递给函数

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


有关JavaScript的更多信息。在这里，您可以找到许多有用的链接，指向各种JavaScript相关主题的介绍。

特别是看看。
为什么不使用jQuery？如果你是一个轮子重新发明的程序员，请告诉我你的理论，关于轮子滚动的方式，什么时候会准备好。很抱歉，我应该说这是学校的作业，我不能使用任何框架，无论哪所学校教你这些东西都落后于标准。除了可怕的编码标准，我什么也看不到。我在这里没有看到任何有趣的POC，至于他们为什么要你这样做。我建议您开始考虑使用JavaScript中的对象，而不是对表进行不必要的索引。将特定对象
this
传递给函数，如
doMagic（this）
中所示，使用传递的对象，而不是索引。实际上，这是一个面向初学者的javascript类，他们试图让我们对语法感到满意，因此我们必须只使用javascript构建一个单页电子商店，但我们很快将开始oop编程和框架。不管怎样，thanx的回答是How thanx man一切都很清楚我要求将id设置为td的原因是dreamweaver自动生成我可以使用的属性列表，方法是放置“.”在元素之后，它没有给我任何东西，所以我想对于表列，它可能不是这样工作的。我还有另一个问题，如何在deleterow函数中获得已删除行的“price”列的值？类似这样的内容。parentNode.parentNode.Cell（2）。innerHTML@max：您是否更改该值？因为您最初将其设置为
price
；）无论如何，如果它始终是第二个单元格，则可以通过
this.parentNode.parentNode.cells[1].innerHTML获取它（最好存储对该行的引用，如
var row=this.parentNode.parentNode；
）。看一看这张照片。顺便说一句，Dreamweaver更适合设计师，它不一定适合真正开发网站。不要依赖于代码完成。它使您的生活更轻松，但也可以了解哪些属性可用；）。
 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));
 }

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

cell.id = "something";