我正在添加无限输入字段。下面的代码工作正常,只有在第一个 <tr>
之后添加的一个问题。它没有在附加 <tr>
之后添加字段。如果点击add option
它正在添加<before>
或 first
之后<tr>
。忽略其他<tr>
。
我的html
<table width="100%" cellspacing="0" id="orderchecklist_item_grid_servicecenters" class="data border">
<colgroup><col width="120">
<col>
<col width="100">
<col width="70">
</colgroup><thead>
<tr class="headings">
<th width="80%">Item</th>
<td width="10%" class="last"><button style="" onclick="addfield();" class="scalable add" type="button" title="Add Option" id="add_new_option_button"><span><span><span>Add Option</span></span></span></button></td>
</tr>
</thead>
<tbody id="orderchecklist_item_list">
<tr class="template" id="orderchecklist_item_template1">
<td><input type="text" value="" name="servicename[]" placeholder="check list item" class="input-text">
</td>
<td class="last"><button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="Delete" id="delete_button"><span><span><span>Delete</span></span></span></button></td>
</tr>
</tbody>
<tfoot id="extra_field" class="no-display template">
<tr class="template" id="orderchecklist_item_template">
<td><input type="text" name="item[]" placeholder="check list item" class="input-text"></td>
<td class="last"> <button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="Delete" id="delete_button"><span><span><span>Delete</span></span></span></button></td>
</tr>
</tfoot>
</table>
我的用于添加和删除字段的 js 代码
<script type="text/javascript">
function addfield()
{
var htm= $('extra_field').innerHTML;
$$('#<?php echo $_block->getHtmlId() ?>_list').last('tr').insert({after:htm});
}
function removefield(ele)
{
var row = ele.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
最佳答案
只需在隐藏的额外字段之前插入即可。
代码
function addfield()
{
var htm= $('extra_field').innerHTML;
$('extra_field').insert({before:htm});
}
另一种方式
function addfield()
{
var htm= $('extra_field').innerHTML;
$$('#orderchecklist_item_list tr').last('tr').insert({after:htm});
}
$$('#orderchecklist_item_list').last('tr')
将从 orderchecklist_item_list
元素中查找 tr
。因此它会自行返回“#orderchecklist_item_list”。
关于javascript - 使用原型(prototype)添加无限的输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34917301/