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 中发布我的（在评论中解释）：

＆＃13;

<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>

＆＃13;

其中一个好处是，它为表设置了一个事件处理程序，而不是每个按钮的（新）函数。
在表格的onclick-handler（返回的函数）中，您可以处理源自表格的任何点击事件：在此示例中，它处理其类包含＆quot; append_up＆＃39;或者＆＃39; append_down＆＃39; （所以你也可以设置其他样式类，如<button class="red_rounded_button append_up">）在某种程度上，这是更简单/不引人注目的，因为它深度复制一行（而不是需要一些html-string，其中（没有jQuery）在旧浏览器中的表有一些问题，特别是IE）。
另请注意，此技术不会触及javascript的全局名称空间。编辑：改进了类名缓存，因此我们不会在（例如）alt_append_up上失败并添加早期返回。

最后，回答你的上一个请求：因为这使用了正确的DOM方法，每次你获得表格的行（并包含输入等元素），你就会按顺序得到它们 / em>他们在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/

使用JavaScript附加新表格行

4 个答案: