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

Question

I want to add rows dynamically at runtime using Jquery.我想在运行时使用 Jquery 动态添加行。 At beginning table don't have any records.开始表没有任何记录。 When user click the ADD Button it has to add the rows.当用户单击ADD Button它必须添加行。

When user click ADD Button the operator dropdown list box value and Filter values should add in that table row.当用户单击添加按钮时，运算符下拉列表框值和过滤器值应添加到该表行中。

Here what I tried Jquery CODE在这里我尝试了Jquery CODE

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

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

I tried both lines.我试过两条线。 But it doesn't make any sense.但这没有任何意义。 Thanks谢谢

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

Your input string HTML is incorrect. 您的输入字符串HTML不正确。 As of now you have no TD element thus content is not displayed. 截至目前，您没有TD元素，因此不显示内容。 However its appended and exists in DOM 但是它附加并存在于DOM中

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

instead of 代替

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

It may help you. 它可能会帮助你。

Answer 4

Using a table of 4 columns:使用 4 列的表格：

I can add values dinamically like this:我可以像这样动态地添加值：

 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>");

and the final result will be:最终结果将是：

如何使用 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