Question

我正在添加无限输入字段。下面的代码只能在第一个<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>

Answer 1

只需在隐藏的额外字段之前插入。

<强>代码

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')会从tr元素中找到orderchecklist_item_list。所以它返回＆＃39;＃orderchecklist_item_list＆＃39;它自我。

Fiddle 和 Fiddle 2

使用原型添加无限输入字段

1 个答案: