Question

<table id="ratecardlist">
    <tr>
        <th> Show Time</th>
        <th> Balcony </th>
        <th> Box </th>
        <th> &nbsp; </th>
    </tr>
   <tr>
       <td>10.30AM</td>           
       <td><input type="text" name="bal:1:3" value="100" /> </td>
       <td><input type="text" name="box:1:5" value="200" /> </td>
       <td><a href="#" onClick="applytoAll();">Apply To All</a></td>
   </tr>
   <tr>
       <td>1.30PM</td>           
       <td><input type="text" name="bal:3:3" value="400" /> </td>
       <td><input type="text" name="box:3:5" value="450"/> </td>
       <td>&nbsp;</td>
   </tr>
  <tr>
       <td>6.30PM</td>           
       <td><input type="text" name="bal:5:3" value="600" /> </td>
       <td><input type="text" name="box:5:5" value="600" /> </td>
       <td>&nbsp;</td>
   </tr>
       .
       .
       .
</table>

Apply to All link will always in second row. When I Click Apply To All, input values in this row should copy to other rows input fields. How to do that plz Help.

e.g.
After click Apply To All,

   <table id="ratecardlist">
    <tr>
        <th> Show Time</th>
        <th> Balcony </th>
        <th> Box </th>
    </tr>
   <tr>
       <td>10.30AM</td>           
       <td><input type="text" name="bal:1:3" value="100" /> </td>
       <td><input type="text" name="box:1:5" value="200" /> </td>
       <td><a href="#" onClick="applytoAll();">Apply To All</a></td>
   </tr>
   <tr>
       <td>1.30PM</td>           
       <td><input type="text" name="bal:3:3" value="100" /> </td>
       <td><input type="text" name="box:3:5" value="200"/> </td>
       <td>&nbsp;</td>
   </tr>
  <tr>
       <td>6.30PM</td>           
       <td><input type="text" name="bal:5:3" value="100" /> </td>
       <td><input type="text" name="box:5:5" value="200" /> </td>
       <td>&nbsp;</td>
   </tr>
       .
       .
       .
</table>

Answer 1

First, the way you’re handling the click event does not provide enough context (e.g. the clicked element) to the handler. Ideally, you would decorate your link with an id or a class attribute and use that to register the handler unobtrusively (through jQuery’s click() method, for instance).

If you’re stuck with your current strategy, you should at least pass the clicked element to the handler:

<a href="#" onClick="applyToAll(this);">Apply To All</a>

From there, you can implement the function as follows:

function applyToAll(element)
{
    // Build an array with the values of this row, in document order.
    var $row = $(element).closest("tr");
    var values = $row.find("input:text").map(function() {
        return $(this).val();
    }).get();

    // Apply the values to the other rows.
    $row.nextAll().each(function() {
        $(this).find("input:text").each(function(index) {
            $(this).val(values[index]);
        });
    });
}

This solution supports an arbitrary number of input elements per row, not just two.