如何使用 Jquery 在 HTML 表格中添加行？

Question

我想在運行時使用 Jquery 動態添加行。 開始表沒有任何記錄。 當用戶單擊ADD Button它必須添加行。

當用戶單擊添加按鈕時，運算符下拉列表框值和過濾器值應添加到該表行中。

在這里我嘗試了Jquery CODE

$("#btnAdd").click(function () {

   // $("#queryTable tr:last").after("<tr>...</tr><tr>...</tr>");
    $('#queryTable > tbody:last-child').append('<tr>Record1</tr><tr>Record2</tr>');
});

我試過兩條線。 但這沒有任何意義。 謝謝

HTML代碼

 <table class="table table-hover " id="queryTable">
     <thead>
         <tr>
             <th>Field Name</th>
             <th>Values</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>Mark</td>  //Please ignore these two records. At beginning the table will be empty
             <td>Otto</td>
         </tr>
         <tr>
             <td>Jacob</td>
             <td>Thornton</td>
         </tr>
     </tbody>
 </table>

Answer 1

添加HTML元素的正確jQuery代碼是：

$('#queryTable tbody').append('<tr><td>Record1</td><td>Record2</td></tr>');

Answer 2

您的輸入字符串HTML不正確。 截至目前，您沒有TD元素，因此不顯示內容。 但是它附加並存在於DOM中

'<tr><td>Record1</td><td>Record2</td></tr>

代替

'<tr>Record1</tr><tr>Record2</tr>'

 $('#queryTable > tbody:last-child').append('<tr><td>Record1</td><td>Record2</td></tr>');

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-hover" id="queryTable"> <thead> <tr> <th>Field Name</th> <th>Values</th> </tr> </thead> <tbody> <tr> <td>Mark</td> <td>Otto</td> </tr> <tr> <td>Jacob</td> <td>Thornton</td> </tr> </tbody> </table>

Answer 3

<!DOCTYPE html>
<html>
<head>

<title>Add Rows Dynamically</title>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".add").click(function(){
            var name = $("#name").val();
            var lastname = $("#lastname").val();
            var markup = "<tr><td>" + name + "</td><td>" + lastname + "</td></tr>";
            $("table tbody").append(markup);
        });


    });    
</script>
</head>
<body>

        <input type="text" id="name" placeholder="Name">
        <input type="text" id="lastname" placeholder="Last Name">
        <input type="button" class="add" value="Add">

    <table style="border: 1px solid black;">
        <thead>
            <tr>

                <th>Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</body> 
</html>

它可能會幫助你。

Answer 4

使用 4 列的表格：

我可以像這樣動態地添加值：

 var TableId = "table_" + id; 

 var table = $("#" + TableId );

 table.find("tbody tr").remove();
                                            
 table.append("<tr><td>" + "1" + "</td><td>" + "lorem"  + "</td><td>" + "ipsum" + "</td><td>" + "dolor" + "</td></tr>");

最終結果將是：

如何使用 Jquery 在 HTML 表格中添加行？

問題描述

3 個解決方案

解決方案1
4 2017-02-02 06:20:10

解決方案2
3 已采納 2017-02-02 06:24:41

解決方案3
0 2017-02-02 06:57:25

解決方案4
0 2021-12-03 15:38:46

如何使用 Jquery 在 HTML 表格中添加行？

問題描述

3 個解決方案

解決方案1 4 2017-02-02 06:20:10

解決方案2 3 已采納 2017-02-02 06:24:41

解決方案3 0 2017-02-02 06:57:25

解決方案4 0 2021-12-03 15:38:46

解決方案1
4 2017-02-02 06:20:10

解決方案2
3 已采納 2017-02-02 06:24:41

解決方案3
0 2017-02-02 06:57:25

解決方案4
0 2021-12-03 15:38:46