0

在此代码中，javascript 函数将 from[1] 作为 displayDatePicker('from[1]', false, 'dmy', '-') 中的参数。当我使用 jquery 克隆此（第二）行时，我的所有输入和选择名称都会递增，但 javascript 函数仍将 from[1] 作为参数。我想问如何将它从[1] 更改为 from[2] 等等

<tr>
         <td width="19%" align="right" ><input type="text" id="roomcat" name="roomcat[1]" value="Deluxe" /></td>
         <td width="1%" align="center" >&nbsp;</td>
         <td width="15%" align="left" ><select class="f" name="roomtype[1]" id="roomtype">
            <option value="">Please Select</option>
            <option value="Single">Single</option>
            <option value="Double">Double</option>
            <option value="Triple">Triple</option>
            <option value="Extra">Extra</option>
         </select></td>
         <td width="7%" align="left" ><input type="text" id="cfit" name="cfit[1]" /></td>
         <td width="8%" align="left" ><input type="text" id="cgit" name="cgit[1]" /></td>
         <td width="7%" align="center" ><input type="text" id="rfit" name="rfit[1]" /></td>
         <td width="8%" align="center" ><input type="text" id="rgit" name="rgit[1]" /></td>
         <td width="10%" align="center" >
            <input class="f" style="width:70px" type="text" size="12" name="from[1]" id="from" value="<?php if($mode==1)
            {
            echo $from;
            }
            else
            {
            echo "From";
            }?>" readonly="readonly"  />
            <a href="javascript:displayDatePicker('from[1]', false, 'dmy', '-')"><i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16" /></a>
         </td>
         <td width="10%" align="center" >
            <input style="width:70px" class="f" type="text" size="12" name="to[1]" id="to" value="<?php if($mode==1)
              {
              echo $to;
              }
              else
              {
              echo "To";
              }?>" readonly="readonly" />
              <a href="javascript:displayDatePicker('to[1]', false, 'dmy', '-')"><i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16"  /></a>
         </td>
         <td width="15%" align="left" >&nbsp;</td>
       </tr>

jQuery代码是

    $(document).ready(function() {
    $("#addrow").click(function() {
      var row = $('#table2 tbody>tr:last').clone(true);
        row.find("input:text").each(function(){
    this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
            return '[' + (parseInt(p1,10)+1) + ']';
        });
        })
    row.find("select").each(function(){
    this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
            return '[' + (parseInt(p1,10)+1) + ']';
        });
        })
      row.insertAfter('#table2 tbody>tr:last');
      return false;
    });
  });
4

2 回答 2

1

删除 s 中的id属性，您<input>不需要它们，并且重复ids 只会给您带来无效的 HTML 和奇怪的问题。如果您将它们用于样式，请改用类。如果您需要它们来做其他事情，那么您必须在复制时修复它们，以免最终出现重复id的 s。

现在我们可以稍微清理一下您的克隆。当你克隆你的行时，你不需要解析括号中的数字，你可以问表格它有多少行，然后加一来得到新的数字：

var n = $('#table2 tbody>tr').length + 1;

然后您的replace电话简化为：

this.name.replace(/\[(\d+)\]$/, '[' + n + ']');

此外，您可以使用多重选择器同时遍历<input>s 和<select>s：

row.find('input:text, select').each(...)

您在两种情况下都更改了相同的属性，因此不需要两个相同的循环。

javascript:displayDatePicker(...)在你的使用<a>是没有必要的。您可以使用 jQuery 通过向它们添加一个类来绑定到这些<a>s 上的点击：

<a class="datepicker">...</a>

然后使用回调将回调绑定到它们，回调中click的closest/find组合将让您找到相应的<input>：

$('a.datepicker').click(function() {
    var $input = $(this).closest('td').find('input[type=text]');
    displayDatePicker($input.attr('name'), false, 'dmy', '-'));
});

您正在使用clone，因此克隆元素上的事件处理程序将被复制，因此您不必delegate弄乱on.

这是一个带有简化 HTML 的演示：http: //jsfiddle.net/ambiguous/yEaw6/

于 2012-05-03T17:25:54.693 回答
0

根据我从您问题的第一段中了解到的内容..

这会有帮助吗？

var cells = $('td');  //Select row/cells here

$.each(cells, function(index, cell){
  //index corresponds to index of current cell in set of matched cells  
});
于 2012-05-04T05:50:53.347 回答