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 获取URL参数的插件
Mar 04 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
前台js调用后台方法示例
Dec 02 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
jQuery实现简单全选框
Sep 13 jQuery
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模板,主要想体现一下思路
2006/12/25 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Python基于requests库爬取网站信息
2020/03/02 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
Python 可视化神器Plotly详解
2020/12/26 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
大学军训感言
2014/01/10 职场文书
消防安全员岗位职责
2014/03/10 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
个人剖析材料范文
2014/09/30 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
实习介绍信范文
2015/05/05 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL