javascript中的动态索引设置

如何在添加新行时指定行按钮的onClick属性中的索引号?

你不。相反，使用文本框和按钮在同一行的事实。我可能根本不会在按钮上使用onclick;相反，我将在table上有一个单一的单击处理程序，并处理那里的按钮单击(这称为事件委托)。像这样:

var table = document.getElementById("theTableID");
table.onclick = function(event) {
    var elm, row, boxes, index, box;
    // Handle IE difference
    event = event || window.event;
    // Get the element that was actually clicked (again handling
    // IE difference)
    elm = event.target || event.srcElement;
    // Is it my button?
    if (elm.name === "clear") {
       // Yes, find the row
       while (elm && elm !== table) {
           if (elm.tagName.toUpperCase() === "TR") {
               // Found it
               row = elm;
               break;
           }
           elm = elm.parentNode;
       }
       if (row) {
           // Get all input boxes anywhere in the row
           boxes = row.getElementsByTagName("input");
           for (index = 0; index < boxes.length; ++index) {
               box = boxes[index];
               if (box.name === "whatever") {
                   box.value = "";
                }
           }
       }
    }
};

…但是如果你想继续使用按钮上的onclick属性，你可以抓住中间:

按钮:

<input type="button" onclick="clearBoxes(this);"  ...>

function clearBoxes(elm) {
   var row, boxes, index, box;
   // Find the row
   while (elm) {
       if (elm.tagName.toUpperCase() === "TR") {
           // Found it
           row = elm;
           break;
       }
       elm = elm.parentNode;
   }
   if (row) {
       // Get all input boxes anywhere in the row
       boxes = row.getElementsByTagName("input");
       for (index = 0; index < boxes.length; ++index) {
           box = boxes[index];
           if (box.name === "whatever") {
               box.value = "";
            }
       }
   }
}

引用:

• DOM2核心规范-所有主要浏览器都支持
• DOM2 HTML规范- DOM和HTML之间的绑定
• DOM3核心规范-一些更新，并非所有主要浏览器都支持
• HTML5规范-现在有DOM/HTML绑定在它，如HTMLInputElement，所以你知道关于value和name属性。

离题:正如您所看到的，我必须解决一些浏览器差异，并在该代码中显式地做一些简单的实用程序操作(如查找元素最近的父元素)。如果你使用一个像样的JavaScript库，如jQuery, Prototype, YUI, Closure，或其他几个，他们会为你做这些事情，让你专注于你的实际问题。

为了给你一个概念，这里是第一个用jQuery编写的例子(通过事件委托处理点击):

$("#theTableID").delegate("input:button[name='clear']", "click", function() {
    $(this).closest("tr").find("input:text[name='whatever']").val("");
});

是的,真的。其他库也会使事情变得更简单。

最好使用事件委托，或者您可以在JavaScript中使用this。

使用jQuery的事件委托

<input class="clear-row-btn" type="button" >Clear Row</input>

。生活事件

$(".clear-row-btn").live("click", function(){
  var $tr = $(this).closest("tr"); 
  $tr.find("input[type='text']").val(""); 
});

<input type="button" onclick="clearRow(this)" >Clear Row</input>

 function clearRow(btn) {  
  var $tr = $(btn).closest("tr"); 
  $tr.find("input[type='text']").val(""); 
 }

 function clearRow(element) { 
      while(element.nodeName!='TR'){
       element = element.parentNode;
      }
      //find textboxes inside the element, which is now the parent <tr>      
 }