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 相关文章推荐
jquery.ui.draggable中文文档
Nov 24 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 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
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
Python import用法以及与from...import的区别
2015/05/28 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
详解Python 中的容器 collections
2020/08/17 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
高三体育教学反思
2014/01/29 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
导游个人求职信范文
2014/03/23 职场文书
文化活动实施方案
2014/03/28 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书