js添加table的行和列 具体实现方法


Posted in Javascript onJuly 22, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script language="javascript" type="text/javascript">
        function addRow() {
            var newTR = document.getElementById("testTable").insertRow(document.getElementById("testTable").rows.length);
            var newNameTD = newTR.insertCell(0);
            newNameTD.innerHTML = "aa";
            var newNameTD = newTR.insertCell(1);
            newNameTD.innerHTML = "<input name='LastName' id='LastName' type='text' />";
            var newNameTD = newTR.insertCell(2);
            newNameTD.innerHTML = "<input name='BirthDay' id='BirthDay' type='text'   />";
            var newNameTD = newTR.insertCell(3);
            newNameTD.innerHTML = "<input name='age' id='age' type='text'    />";
        }
        function insertRow() {
            var oTable = document.getElementById("table_info");
            var oTr = oTable.insertRow();
            var oTd = oTr.insertCell();
            oTd.innerHTML = "新添加了一行";
        }
        function insertRow2() {
            //获取table对象
            var table = document.getElementById("table_info2");
            //找到要添加button的td,这里以表格第一行第一列为例子
            var oTd = table.rows[0].cells[0];
            //添加button到td中,添加前吧td内容清空并赋予button的代码
            oTd.innerHTML = "<button onclick='insertRow22()'>添加收费</button>";
        }
        function insertRow22() {
            var oTable = document.getElementById("table_info2");
            var oTr = oTable.insertRow();
            var oTd = oTr.insertCell();
            oTd.innerHTML = "新添加了一行";
        }
        function insertRow3() {
            //获取table对象
            var table = document.getElementById("table_info3");
            //找到要添加button的td,这里以表格第一行第一列为例子
            var oTd2 = table.rows[0].insertCell();
            oTd2.innerHTML = "&nbps;";
        }
        function tableDiv() {
            var maxRow = 4;
            var maxCol = 8;
            var strTbody = ["<table border='1'><tbody>"];
            for (var i = 0; i < maxRow; i++) {
                strTbody.push("<tr>");
                for (var j = 0; j < maxCol; j++) {
                    strTbody.push("<td>test</td>");
                }
                strTbody.push("</tr>");
            }
            strTbody.push("</tbody></table>");
            var obj = document.getElementById("tableDiv");
            obj.innerHTML = strTbody.join("");
        }
        function init() {
            var _table, _tbody, tr, td, text, maxRow, maxCol;
            var docBody = document.body;
            var _doc = document;
            maxRow = 5;
            maxCol = 8;
            _table = _doc.createElement("table");
            _table.border = "1";
            _table.style.tableLayout = "fixed";
            _tbody = _doc.createElement("tbody");
            _table.insertBefore(_tbody, null);
            docBody.insertBefore(_table, null);
            for (var i = 0; i < maxRow; i++) {
                tr = _doc.createElement("tr");
                _tbody.insertBefore(tr, null);
                for (var j = 0; j < maxCol; j++) {
                    td = _doc.createElement("td");
                    text = _doc.createTextNode("Text");
                    td.insertBefore(text, null);
                    tr.insertBefore(td, null);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <table id="testTable" border='1' cellspacing="1">
            <tr>
                <th>
                    FirstName
                </th>
                <th>
                    LastName
                </th>
                <th>
                    BirthDay
                </th>
                <th>
                    age
                </th>
            </tr>
            <tr>
                <td>
                    Jim
                </td>
                <td>
                    Green
                </td>
                <td>
                    L.A
                </td>
                <td>
                    23
                </td>
            </tr>
            <tr>
                <td>
                    Andrew
                </td>
                <td>
                    Hou
                </td>
                <td>
                    Xi'an
                </td>
                <td>
                    25
                </td>
            </tr>
        </table>
        <input type="button" id="aaa" value="+add new Row" onclick="addRow();" />
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type="button" value="按钮添加行" onclick="insertRow();" />
        <table id="table_info" border="1">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type="button" value="按钮中添加行" onclick="insertRow2();" />
        <table id="table_info2" border="1">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type="button" value="连续添加列" onclick="insertRow3();" />
        <table id="table_info3" border="1">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type="button" value="添加一个table" onclick="tableDiv();" />
        <div id="tableDiv" />
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type="button" value="连续添加table" onclick="init();" />
    </div>
</body>
</html>
Javascript 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
vue实现扫码功能
Jan 17 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
JS中eval函数的使用示例
Jul 21 #Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 #Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 #Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 #Javascript
jquery封装的对话框简单实现
Jul 21 #Javascript
jquery触发a标签跳转事件示例代码
Jul 21 #Javascript
用JavaScript实现动画效果的方法
Jul 20 #Javascript
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
Email+URL的判断和自动转换函数
2006/10/09 PHP
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
javascript一点特殊用法
2008/05/28 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
详解jQuery选择器
2016/12/21 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
Python实现针对中文排序的方法
2017/05/09 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
运动会通讯稿300字
2015/07/20 职场文书
python可视化之颜色映射详解
2021/09/15 Python
Python 全局空间和局部空间
2022/04/06 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL