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>

jquery 动态添加表格行的更多相关文章

  1. JQuery动态添加表格，然后动态删除不成功问题

    背景: 自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用 源码: function addtr() { var trinfo = & ...

  2. Jquery动态添加多行，返回数据至每一行中

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sys_channel_ed ...

  3. jquery动态表格，动态添加表格行

    转载收藏于:https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.html 效果图:   Html:<html> &l ...

  4. jQuery动态添加表格1

    用jquery的append方法在指定行的后面新增一行tr,会把新增的行的html追加到指定行的html里面 content +="<tr><td>123</t ...

  5. jquery动态合并表格行

    利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...

  6. js jquery 动态添加表格

    for循环将你要添加的标签写上,然后直接var talbeAdd=""for(){ tableAdd+="<tr><td>这儿写你要添加的内容&l ...

  7. jQuery 实现添加表格行，删除行，调用日期控件

    $(function () { getdatepicker(); getdatetimepicker(); }); $(document).on('click','#addTable',addTr); ...

  8. 利用jquery动态添加和删除表格的一行，并且保存单行数据

    开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...

  9. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

随机推荐

  1. hdu 2111 Saving HDU

    解题思路: 首先做本题,要清楚题意的要求. 1.读取数据到结构体数组中,然后按其价值降序(价值最大的放在最上面). 2.比较给定的M (包裹容量),如果大于当前宝物的体积,则计算总价值+= 宝物的总价 ...

  2. 生成元（Digit Generator ，ACM/ICPC Seoul 2005 ,UVa 1583）

    生成元:如果 x 加上 x 各个数字之和得到y,则说x是y的生成元. n(1<=n<=100000),求最小生成元,无解输出0. 例如:n=216 , 解是:198 198+1+9+8=2 ...

  3. ios 正则邮箱

    - (BOOL) isEmail { NSString *emailRegEx = @"(?:[a-z0-9!#$%\\&'*+/=?\\^_`{|}~-]+(?:\\.[a-z0- ...

  4. python之BIF函数在列表中的应用

    1 Python 3.3.4 (v3.3.4:7ff62415e426, Feb 10 2014, 18:13:51) [MSC v.1600 64 bit (AMD64)] on win32 2 T ...

  5. MySQL Cluster(MySQL 集群) 初试（转）

    作/译者:叶金荣(imysql#imysql.com>),来源:http://imysql.com,欢迎转载. 作/译者:叶金荣(Email: ),来源:http://imysql.cn,转载请 ...

  6. Ubuntu无法关机解决办法

    说明:如果不成功请参考一下文章最后的内容,也许会有帮助. 其实不止在ubuntu里面,fedora里面我也遇到了这个问题,就是电脑可以重启,但是不能直接关机,否则就一直停在关机界面,需手动关机.郁闷很 ...

  7. 如何查看ubuntu下显卡驱动是否已经成功安装

    首先得安装mesa-utils,在终端输入命令:sudo apt-get install mesa-utils然后再运行命令:glxinfo | grep rendering如果结果是“yes”,证明 ...

  8. hMailServer+foxmail配置局域网邮件服务器

    1.下载hMailServer并安装,请参考以下网址 https://www.hmailserver.org 2.安装foxmail,官网如下: http://www.foxmail.com/ 3.配 ...

  9. POJ 1062 昂贵的聘礼

    C - 昂贵的聘礼 Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & %I64u Submit St ...

  10. python - PyQuery

    偶尔的机会,知道这么个扩展,手贱翻了下文档,发现似乎挺有意思,遂记录一二. what: 这是一个python版本的jquery,而且是后端执行的,至少官方是这么说的: pyquery allows y ...