动态地增加Javascript函数的参数名称的索引 [英] Increment index of a Javascript function's argument name dynamically
问题描述
在此代码中，javascript函数将from [1]用作displayDatePicker('from [1]'，false，'dmy'，'-')的参数.当我使用jquery克隆此(第二个)行时，我所有的输入和选择名称都会递增，但javascript函数仍将from [1]作为参数.我想问一下如何将它从[1]更改为[2]，以此类推
In this code javascript function is taking from[1] as argument in displayDatePicker('from[1]', false, 'dmy', '-'). When I clone this (second) row using jquery, all my input and select names get incremented but javascript function is still taking from[1] as argument. I want to ask how to change this from[1] to from[2] and so on
<tr>
<td width="19%" align="right" ><input type="text" id="roomcat" name="roomcat[1]" value="Deluxe" /></td>
<td width="1%" align="center" > </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" > </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;
});
});
推荐答案
将id属性拖放到<input>中，则不需要它们，而重复的id仅会使您留下无效的HTML和奇怪的问题.如果您要使用它们进行样式设置，请改用类.如果您需要它们作其他用途，则在复制时必须对其进行修复，以免最终出现重复的id.
Drop the id attributes in your <input>s, you don't need them and having duplicate ids just leaves you with invalid HTML and strange problems. If you're using them for styling, use classes instead. If you need them for something else, then you'll have to fix them when you copy so that you don't end up with duplicate ids.
现在，我们可以稍微整理一下您的克隆了.克隆行时，无需解析方括号中的数字，您只需询问表中有多少行，然后添加一行即可获得新的数字:
Now we can clean up your cloning a little bit. When you're cloning your row, you don't need to parse the number in brackets, you can just ask the table how many rows it has and add one to get the new number:
var n = $('#table2 tbody>tr').length + 1;
然后您的 replace 调用可以简化为:
then your replace calls simplify to this:
this.name.replace(/\[(\d+)\]$/, '[' + n + ']');
此外，您可以使用多重选择器来遍历<input>和<select>同时:
Also, you can use a multiple-selector to iterate through the <input>s and the <select>s at the same time:
row.find('input:text, select').each(...)
在两种情况下，您都将更改相同的属性，因此不需要两个相同的循环.
You're changing the same attribute in both cases so there's no need for two identical loops.
不需要在<a>中使用javascript:displayDatePicker(...).您可以使用jQuery通过向其添加类来绑定到这些<a>的点击:
Using javascript:displayDatePicker(...) in your <a> isn't necessary. You can use jQuery to bind to clicks on those <a>s by adding a class to them:
<a class="datepicker">...</a>
，然后使用 click 和回调中的find 组合将使您找到相应的<input>:
$('a.datepicker').click(function() {
var $input = $(this).closest('td').find('input[type=text]');
displayDatePicker($input.attr('name'), false, 'dmy', '-'));
});
您正在使用 clone ，因此将复制克隆元素上的事件处理程序，以便您不必弄乱 delegate 或动态版本的
You're using clone so the event handlers on the cloned elements will be copied so you don't have to mess around with delegate or the dynamic versions of on.
这是一个使用简化HTML的演示: http://jsfiddle.net/ambiguous/yEaw6/
Here's a demo with simplified HTML: http://jsfiddle.net/ambiguous/yEaw6/
这篇关于动态地增加Javascript函数的参数名称的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
