Button在JavaScript中單擊以在表格中添加一行

我的任務是使用表格和按鈕創建頁面。當用戶按下按鈕時，表格中會添加一行。因此，我在我的html頁面上有一個按鈕（<button id="my_button">Bla-bla</button>），和一個表格（<table id="my_table">）。我有一個單獨的JavaScript文件。在該文件中我寫道：Button在JavaScript中單擊以在表格中添加一行

$(function() { 
    $(my_button).click(function(){    
     tbl = document.getElementById("my_table"); 
     row = tbl.insertRow(0);  
     var newCell = row.insertCell(0); 
     newCell.height=300; 
     newCell.innerHTML="Some New Text"; 
    }); 
});

但有一個問題：當我按下按鈕時，該行增加了幾毫秒，然後消失，我再次看到那些表，而新行。什麼問題，我該如何解決？

來源

2013-02-18 user1460819

頁面上是否有任何其他代碼使用'setTimeout'或類似的？ – 2013-02-18 02:36:51

你有沒有可能與此衝突的任何其他Javascript？它自己它似乎按預期工作（[例子]（http://jsbin.com/ekikam/1/edit）） – 2013-02-18 02:37:38

可能與你的問題沒有關係，但爲什麼不使用'$（'＃my_table'） '和'$（'＃my_table'）。append（）'？ – 2013-02-18 02:40:49

這裏的一個小例子

HTML代碼

<table class="authors-list"> 
    <tr> 
     <td>author's first name</td><td>author's last name</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="text" name="first_name" /> 
     </td> 
     <td> 
      <input type="text" name="last_name" /> 
     </td> 
    </tr> 
</table> 
<a href="#" title="" class="add-author">Add Author</a>

jQuery代碼

var counter = 1; 
jQuery('a.add-author').click(function(event){ 
    event.preventDefault(); 
    counter++; 
    var newRow = jQuery('<tr><td><input type="text" name="first_name' + 
     counter + '"/></td><td><input type="text" name="last_name' + 
     counter + '"/></td></tr>'); 
    jQuery('table.authors-list').append(newRow); 
});

看到這個鏈接工作這段代碼 http://jsfiddle.net/yUfhL/

來源

2013-02-18 04:10:46 Kumar

如果您打算使用jQuery進行點擊事件，那麼您可能會在代碼中一致地使用它。

給這個一掄：jsfiddle

$("#my_button").click(function(){    
    $("#my_table").append('<tr style="height:300px"><td>Some New text</td></tr>'); 
});

來源

2013-02-18 02:44:58 meub

沒有看到你的商標達也可能是作爲系統的意見建議的形式提交和頁面令人耳目一新。

如果是這樣的話，簡單的解決方法是在你的處理器使用event.preventDefault（）：

$(function() { 
    $(my_button).click(function(){ 
     event.preventDefault();   
     tbl = document.getElementById("my_table"); 
     row = tbl.insertRow(0);  
     var newCell = row.insertCell(0); 
     newCell.height=300; 
     newCell.innerHTML="Some New Text"; 
    });

}）;

您CA在jquery docs

按其他的答案閱讀更多有關的preventDefault，如果你有機會到jQuery的，你可以用它整個代碼整理的方法。

來源

2013-02-18 03:42:34

<script type="text/javascript"> 
      $(document).ready(function(){   
       $(document).on("click","td.addNewButton",function(e) { 
        var row = $(this).parent().parent().children().index($(this).parent()); 
        var html = $('#myTable tbody tr:eq('+row+')').html(); 
        $('#myTable tbody tr:eq('+row+')').after('<tr>'+html+'</tr>'); 
       }); 
     }); 
    </script>

這將很好地爲你:)

來源

2016-02-19 09:27:51

Button在JavaScript中單擊以在表格中添加一行

回答

相關問題