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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 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与C#的值类型指向区别的详解
2013/05/21 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php实现aes加密类分享
2014/02/16 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
理解AngularJs指令
2015/12/10 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
python实现将元祖转换成数组的方法
2015/05/04 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
python递归法解决棋盘分割问题
2019/07/17 Python
pytorch中index_select()的用法详解
2021/01/06 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
一些Solaris面试题
2015/12/22 面试题
事业单位竞聘上岗实施方案
2014/03/28 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
详解python网络进程
2021/06/15 Python