Question

在这段代码中，javascript函数取自[1]作为displayDatePicker中的参数（'from [1]'，false，'dmy'，' - '）。当我使用jquery克隆这个（第二）行时，我的所有输入和选择名称都会递增，但javascript函数仍然从[1]作为参数。我想问一下如何将其从[1]改为[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 Code是

    $(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;
    });
  });

Answer 1

删除id中的<input>个属性，您不需要它们，并且重复id只会让您无效的HTML和奇怪的问题。如果您使用它们进行样式设置，请改用类。如果您需要其他内容，那么您在复制时必须修复它们，以免最终导致重复的id。

现在我们可以清理一下你的克隆了。当您克隆行时，您不需要在括号中解析数字，您可以只询问表中有多少行，并添加一行以获取新数字：

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

然后您的replace调用简化了这一点：

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

此外，您可以使用multiple-selector同时迭代<input>和<select>：

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

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

无需在javascript:displayDatePicker(...)中使用<a>。您可以使用jQuery通过向它们添加类来绑定到<a>上的点击：

<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的动态版本。 / p>

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

Answer 2

根据我对你问题第一段所理解的内容......

这会有帮助吗？

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

$.each(cells, function(index, cell){
  //index corresponds to index of current cell in set of matched cells  
});

动态增加Javascript函数的参数名称的索引

2 个答案: