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. Sql Server中启用分布式事务小结

    1.web服务器与数据库服务器同时启动msdtc服务 2. 2台服务器做出如下配置: 控制面板->管理工具->组件服务->计算机->我的电脑->本地DTC .Net示例: ...

  2. 转:Java NIO系列教程(五) 通道之间的数据传输

    在Java NIO中,如果两个通道中有一个是FileChannel,那你可以直接将数据从一个channel(译者注:channel中文常译作通道)传输到另外一个channel. transferFro ...

  3. 一种 Visual Studio 不能单步调试（函数调用）问题

    Visual Studio每次出"莫名其妙的问题"的时候都非常棘手.这次遇到这么一个问题: 新建的Windows的控制台窗口程序(C++),编译链接运行没有问题.但是想单步调试一下 ...

  4. Linux的一个问题ircbot进程

    首先该问题目前还不清楚希望知道的人可以回复我mail fengtaotao2012x@163.com 今天执行一次常规服务器安全抽查的时候发现一台web服务器的一个奇怪的进程 而且更厉害的是cpu使用 ...

  5. 基础知识系列☞GET和POST→及相关知识

    参考资料: [1].<IT企业必读的200个.Net面试题> [2].http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.htm ...

  6. 用Prime31实现Google Play In-App-Blling

    Android开发者想在海外赚钱,接入Google Play是不二选择,然而一堆英文文档对于像我这样的英语四级都木有过的可谓是苦恼之极.近段时间因工作需要研究了Unity接入Google Play的整 ...

  7. unity3d中资源文件从MAX或者MAYA中导出的注意事项

    原地址:http://blog.sina.com.cn/s/blog_6ad33d3501011ekx.html 之前在项目中,没有怎么接触过美术的软件(之前的美术团队很犀利,被他们宠坏了).在自己公 ...

  8. Coursera台大机器学习技法课程笔记02-Dual Support Vector Machine

    这节课讲的是SVM的对偶问题,比较精彩的部分:为何要使用拉格朗日乘子以及如何进行对偶变换. 参考:http://www.cnblogs.com/bourneli/p/4199990.html http ...

  9. Linux 查看网络连接状态

    CLOSED:无连接是活动的或正在进行ESTABLISED:已建立连线的状态:SYN_SENT:发出主动连线 (SYN 标志) 的连线封包:SYN_RECV:接收到一个要求连线的主动连线封包:FIN_ ...

  10. JSOI 2008 火星人prefix

    FROM http://www.lydsy.com/JudgeOnline/problem.php?id=1014 LCP问题 给定串 S[0..n] , 对于一对(a,b)其中0<a,b< ...