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 substr、substring和slice使用说明小记
Sep 15 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
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中改变图片的尺寸大小的代码
2011/07/17 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
Python中scatter函数参数及用法详解
2017/11/08 Python
python模块之paramiko实例代码
2018/01/31 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
Django model反向关联名称的方法
2018/12/15 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
党员批评与自我批评
2014/02/12 职场文书
教师求职自荐信
2014/03/09 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
超市主管竞聘书
2015/09/15 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
一文带你探究MySQL中的NULL
2021/11/11 MySQL