Javascript 如何使用Jquery在HTML表中添加行？_Javascript_Jquery_Html_Asp.net

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

javascript jquery html asp.net

Javascript 如何使用Jquery在HTML表中添加行？,javascript,jquery,html,asp.net,Javascript,Jquery,Html,Asp.net,我想在运行时使用Jquery动态添加行。开始时，表中没有任何记录。当用户单击添加按钮时，必须添加行。当用户单击添加按钮时，操作员下拉列表框值和过滤器值应添加到该表行中这是我试过的 Jquery代码 $("#btnAdd").click(function () { // $("#queryTable tr:last").after("<tr>...</tr><tr>...</tr>"); $('#queryTable >

我想在运行时使用Jquery动态添加行。开始时，表中没有任何记录。当用户单击添加按钮时，必须添加行。

当用户单击添加按钮时，操作员下拉列表框值和过滤器值应添加到该表行中

这是我试过的 Jquery代码

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

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

$（“#btnAdd”）。单击（函数（）{
//$（“#查询表tr:last”）。在（“…”）之后；
$（'#queryTable>tbody:last child'）.append（'Record1Record2'）；
});

我试了两条线。但这没有任何意义。谢谢

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>


字段名
价值观
马克//请忽略这两条记录。开始时，桌子将是空的
奥托
雅各布
桑顿

添加HTML元素的正确jQuery代码是：

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

$（'queryTable tbody'）.append（'Record1Record2'）；

您的输入字符串HTML不正确。到目前为止，您没有

TD

元素，因此不会显示内容。但是，它是附加的，并且存在于DOM中

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

“记录1记录2

而不是

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

'Record1Record2'

$（'#queryTable>tbody:last child'）.append（'Record1Record2'）

字段名
价值观
做记号
奥托
雅各布
桑顿

动态添加行
$（文档）.ready（函数（）{
$（“.add”）。单击（函数（）{
var name=$（“#name”）.val（）；
var lastname=$（“#lastname”）.val（）；
var markup=”“+name+“”+lastname+“”；
$（“表tbody”）。追加（标记）；
});
});    
名称
姓

这可能对你有帮助 @locateganesh，
<!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>