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>

应用于所有链接将始终在第二行。当我单击全部应用时，此行中的输入值应复制到其他行输入字段。怎么做plz帮助。

e.g。单击“全部应用”后，

   <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

首先，您处理click事件的方式没有为处理程序提供足够的上下文（例如，单击的元素）。理想情况下，您可以使用id或class属性修饰链接，并使用它来不显眼地注册处理程序（例如，通过jQuery的click()方法）。

如果您坚持使用当前策略，则至少应将单击的元素传递给处理程序：

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

从那里，您可以按如下方式实现该功能：

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

此解决方案支持每行任意数量的输入元素，而不仅仅是两行。

Answer 2

假设您使用的是jQuery：

$('#ratecardlist a').click(function(){
   var balVal = $(this).closest('tr').find('td[name^=bal]').val();
   var boxVal = $(this).closest('tr').find('td[name^=box]').val();
   $('#ratecardlist td[name^=bal]').val(balVal);
   $('#ratecardlist td[name^=box]').val(boxVal);
});

Answer 3

$(function(){
    $('#applyToAll').click(function(){
        var ctx = $(this).closest('tr');
        $('input[name^="bal"]').val($('input[name^="bal"]', ctx).val());
        $('input[name^="box"]').val($('input[name^="box"]', ctx).val());
        return false;
    });
});

这是code demo。

Answer 4

这很粗糙但应该有效：

function applyToAll()
{
 var bal_val = this.parentNode.parentNode.childNodes[1].childNodes[0].value;
 var box_val = this.parentNode.parentNode.childNodes[2].childNodes[0].value;
 var inps = this.parentNodes.parentNode.parentNode.getElementsByTagName('input');

 for (i=0; i<inps.length; i++)
 {
  inp = inps[i];
  inp.value = bal_val;
  inp = inps[i+1];
  inp.value = box_val;
  i++;
 }
}

如何将一行中的所有数据复制到所有其他行

4 个答案: