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. gcc/g++ 参数

    -static  此选项将禁止使用动态库,所以,编译出来的东西,一般都很大,也不需要什么 动态连接库,就可以运行. -share  此选项将尽量使用动态库,所以生成文件比较小,但是需要系统由动态库.

  2. linux ftp命令（转）

    此命令需要安装ftp, yum install ftp 1. 连接ftp服务器 格式:ftp [hostname| ip-address]a)在linux命令行下输入: ftp 192.168.1.1 ...

  3. MySQL导出数据库

    MySQL命令行导出数据库: 1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录 如我输入的命令行:cd D:\Program\MySQL\MySQL Server 5.0 ...

  4. 手机wifi密码的保存位置

    subjects:  adj. 受制于...的, 被统治的; n. 主题,学科, 国民 the subjects had to kneel down before the king. kneel -& ...

  5. SQL例题合集

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. Select sname,ssex,class from student; 2. 查询教师所有的单位即不重复的Depart ...

  6. wap版百度hi给你飞速的赶脚 赶紧登陆手机百度hi吧

    百度hi自然是百度自己的产品,如果你是做国内市场,这个产品应该要用一下.经常逛百度空间,有时实在受不了它的加载速度,(当然,这个跟你的网速.电脑配置.你所使用的百度空间模板等因素有关),我们看看百度空 ...

  7. PHP数字格式化，每三位逗号分隔数字，可以保留小数

    在报价的时候为了给浏览者更清晰明确的数字,所以需要用到数字格式化,有两种方法,一种自己写函数,另一种当然是系统自带的,其实我更喜欢系统自带的. 先来系统简单的: string number_forma ...

  8. [Effective JavaScript 笔记]第28条：不要信赖函数对象的toString方法

    js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

  9. 随机Loading

    using UnityEngine; using System.Collections; public class Loading : MonoBehaviour { public bool m_Is ...

  10. 转：github使用教程（重装系统后遇到问题该文章帮我解决了）

    github简单使用教程 时间:2012 年 5 月 29 日 6 条评论 分类:学习笔记 , 网络 , 软件 目录 1.注册账户以及创建仓库 2.安装客户端msysgit 3.配置Git 4.提交. ...