使用JavaScript追加新的表格行

Question

以下是生成带有输入字段和按钮的表的代码。

 <table id="myTable">
    <tr>
        <td><input type="text" class="text1"></td>
        <td><input type="text" class="text2"></td>
        <td><input type="text" class="text3"></td>
        <td class="up"><button type="button" class="append_up">Up</button></td>
        <td class="down"><button type="button" class="append_down">Down</button></td>
    </tr>
    <tr>
        <td><input type="text" class="text1"></td>
        <td><input type="text" class="text2"></td>
        <td><input type="text" class="text3"></td>
        <td class="up"><button type="button" class="append_up">Up</button></td>
        <td class="down"><button type="button" class="append_down">Down</button></td>
    </tr>
    <tr>
        <td><input type="text" class="text1"></td>
        <td><input type="text" class="text2"></td>
        <td><input type="text" class="text3"></td>
        <td class="up"><button type="button" class="append_up">Up</button></td>
        <td class="down"><button type="button" class="append_down">Down</button></td>
    </tr>
</table>

我希望能够使用JavaScript在表中的任何位置附加类似的行。 如果单击“向上”按钮，我希望在该行的上方追加一个类似的行，如果单击向下，则在该行的下方追加一个类似的行。 最后，我希望能够通过单击按钮以创建的顺序从表中获取所有数据。 请帮忙。

收到几个答案后，这就是我所做的。

$(document).ready(function(){
          var html = '<tr><td><input type="text" class="text1"></td><td><input type="text" class="text2"></td><td><input type="text" class="text3"></td><td><button type="button" class="append_up">Up</button></td><td><button type="button" class="append_down">Down</button></td></tr>';

          $('.append_up').click(function(e) {
              e.preventDefault();
              $(this).closest('tr').before(html);
          });

          $('.append_down').click(function(e) {
              e.preventDefault();
              $(this).closest('tr').after(html);
          });

      }); 

我可以追加行，但是单击新行上的按钮不会执行任何操作。

Answer 1

由于我找不到包含我喜欢的答案的重复项（例如，即使在IE6中也可以使用... ，并且不需要像复制事件之类的大量替代方法。）我将发布我的纯JavaScript代码 （在注释中说明）：

 <table id="tst_table"><tbody> <tr> <td><input type="text" class="text1"></td> <td><input type="text" class="text2"></td> <td><input type="text" class="text3"></td> <td><button type="button" class="append_up">Up</button></td> <td><button type="button" class="append_down">Down</button></td> </tr> <tr> <td><input type="text" class="text1"></td> <td><input type="text" class="text2"></td> <td><input type="text" class="text3"></td> <td><button type="button" class="append_up">Up</button></td> <td><button type="button" class="append_down">Down</button></td> </tr> <tr> <td><input type="text" class="text1"></td> <td><input type="text" class="text2"></td> <td><input type="text" class="text3"></td> <td><button type="button" class="append_up">Up</button></td> <td><button type="button" class="append_down">Down</button></td> </tr> </tbody></table> <script> //hook it any way you like, this is just for focussing on the example.. document.getElementById('tst_table').onclick=(function(){ function _addRow(trg, dir){ //private function to add row in any direction var row= trg.parentNode.parentNode //get correct row , clone= row.cloneNode(true) //deep-clone that row , inpts= clone.getElementsByTagName('input') //get inputs in clone , L= inpts.length //total no of inputs in clone ; //end var for(;L--; inpts[L].value=inpts[L].defaultValue); //reset inputs to defaultValue row.parentNode.insertBefore(clone, dir ? row.nextSibling : row); //add row row=clone=inpts=L=null; //cleanup } return function(e){ //return uniform click-handler for the whole table var trg=e ? e.target : window.event.srcElement; // get source element if(trg.nodeType === 3) trg = trg.parentNode; // fix Safari bug var clsnam=' '+trg.className+' '; // get className, allow multiple classnames if(~clsnam.indexOf( ' append_up ' )) return _addRow(trg, 0); if(~clsnam.indexOf(' append_down ')) return _addRow(trg, 1); }; })(); </script> 

一件好事是，它为表只设置了一个事件处理程序，而不是为每个按钮设置了一个（新）函数。
在表的onclick-handler（返回的函数）中，您可以处理源自表的任何click-event：在此示例中，它处理其类包含“ append_up”或“ append_down”的按钮（因此，您还可以设置其他样式类，例如<button class="red_rounded_button append_up"> ）。
在某种程度上，这是更简单/不引人注目的，因为它可以深度复制一行（而不是需要一些html字符串，而html字符串（在没有jQuery的情况下）在较旧的浏览器（尤其是IE）中存在一些表问题）。
另请注意，此技术不会涉及javascript的全局名称空间。 编辑：改进的类名缓存，因此我们不会在（例如）： alt_append_up并添加了早期返回。

最后，回答您的最后一个请求：由于此方法使用正确的DOM方法，因此每次获取表的行（并包含输入之类的元素）时，您都将按它们在 DOM 中的顺序获得它们（正是您想要的）。 真好！

Answer 2

$('.append_up').click(function(){

   var str='<tr><td><input type="text" class="text1" value="vikram"></td><td><input type="text" class="text2"></td><td><input type="text" class="text3"></td><td><button type="button" class="append_up">Up</button></td><td><button type="button" class="append_down">Down</button></td></tr>';     
   $(this).parent().parent().before(str);
});
$('.append_down').click(function(){
   var str='<tr><td><input type="text" class="text1" value="sharma"></td><td><input type="text" class="text2"></td><td><input type="text" class="text3"></td><td><button type="button" class="append_up">Up</button></td><td><button type="button" class="append_down">Down</button></td></tr>';
   $(this).parent().parent().after(str);
});

Answer 3

 var html = '<tr><td><input type="text" class="text1"></td><td><input type="text" class="text2"></td><td><input type="text" class="text3"></td><td><button type="button" class="append_up">Up</button></td><td><button type="button" class="append_down">Down</button></td></tr>';

$(document).ready(function(){
        $(document.body).on('click','.append_up',addAbove);
        $(document.body).on('click','.append_down',addBelow);


    });
    function addAbove()
    {
            $(this).closest('tr').before(html);
    }

    function addBelow()
    {
            $(this).closest('tr').after(html);
    }

    you are dynamically appending the elements and hence you should use and on method to bind the click. hope this helps.

Answer 4

尝试这样的事情：

$(document).ready(function(){
    var html = '<tr><td><input type="text" class="text1"></td><td><input type="text" class="text2"></td><td><input type="text" class="text3"></td><td><button type="button" class="append_up">Up</button></td><td><button type="button" class="append_down">Down</button></td></tr>';

    $('.append_up').click(function(e) {
        e.preventDefault();
        $(this).closest('tr').before(html);
    });

    $('.append_down').click(function(e) {
        e.preventDefault();
        $(this).closest('tr').after(html);
    });

});

这里有一个小提琴： http : //jsfiddle.net/vyfhrfvf/