Dynamic index setting in javascript

I have a table to which i need to add rows dynamically on click of a button. Each row has 3 textboxes and a clear button. On click of clear the data in the textboxes need to be cleared i.e. onclick of the button i send the in开发者_如何转开发dex of the row to a method which deletes the contents of the textboxes at that index.

Problem - How do i specify the index number in the onClick property of the row button while adding the new row?

How do i specify the index number in the onClick property of the row button while adding the new row?

You don't. Instead, use the fact that the textboxes and the button are in the same row. I probably wouldn't use onclick on the button at all; instead, I'd have a single click handler on the table and handle the button clicks there (this is called event delegation). Something like this:

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

...but if you want to keep using the onclick attribute on the button instead, you can grab the middle of that:

The button:

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

The function:

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

References:

• DOM2 Core specification - well-supported by all major browsers
• DOM2 HTML specification - bindings between the DOM and HTML
• DOM3 Core specification - some updates, not all supported by all major browsers
• HTML5 specification - which now has the DOM/HTML bindings in it, such as for HTMLInputElement so you know about the value and name properties.

Off-topic: As you can see, I've had to work around some browser differences and do some simple utility things (like finding the nearest parent element of an element) explicitly in that code. If you use a decent JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others, they'll do those things for you, letting you concentrate on your actual problem.

To give you an idea, here's that first example (handling the click via event delegation) written with jQuery:

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

Yes, really. And other libraries will similarly make things simpler.

Best to use event delegation, or you can use this in JavaScript.

Event Delegation w/jQuery

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

.live event

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

HTML w/onclick method

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

jQuery

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

JavaScript

 function clearRow(element) { 

      while(element.nodeName!='TR'){
       element = element.parentNode;
      }

      //find textboxes inside the element, which is now the parent <tr>      
 }