jquery 动态添加表格行

最新推荐文章于 2018-03-15 10:56:31 发布

转载最新推荐文章于 2018-03-15 10:56:31 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gyz418/p/5171043.html

文章标签：

#javascript #ViewUI

本文介绍了如何使用jQuery实现动态添加表格行的功能，包括获取表单输入值、复制并修改表格行内容等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery 动态添加表格行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在此处插入标题</title>
<style>
tr {
    background-color: white;
    font-size: 12px;
    height: 30px;
}

td {
    text-align: center
}
</style>
<script language='javascript' src='../jQuery/jquery.js'></script>
<script>
    $().ready(function() {
        $('#btnOk').bind('click', function() {
            
            //取出三个文本框的值
            var name = $('#name').val();
            var price = $("#price").val();
            var address = $("#address").val();

            //从表头中复制一行插入到表格的内容的最后
            $('#result').append($('#result tr:first').clone());
            
            //选中表格中最后一行中的某个td，改变它的内容
            $('#result tr:last td:eq(0)').html(name);
            $('#result tr:last td:eq(1)').html(price);
            $('#result tr:last td:eq(2)').html(address);    

        });
    });
</script>
</head>
<body>
    <table id='result' width=800 cellspacing="1" bgcolor='#6699cc'>
        <tr>
            <td>商品</td>
            <td>价格</td>
            <td>产地</td>
        </tr>

    </table>
    <hr>
    <input type='text' id='name' />
    <hr>
    <input type='text' id='price' />
    <hr>
    <input type='text' id='address' />
    <hr>
    <input type='button' id='btnOk' value='确定' />
</body>
</html>