javascript - 使用原型(prototype)添加无限的输入字段

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') 将从 orderchecklist_item_list 元素中查找 tr。因此它会自行返回“#orderchecklist_item_list”。

<强> Fiddle 和 Fiddle 2