澳门威利斯人_威利斯人娱乐「手机版」

来自 办公软件 2019-09-11 06:49 的文章
当前位置: 澳门威利斯人 > 办公软件 > 正文

js添加table的行和列

效果图:
图片 1

 

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

js动态增加表格数据_2.html

<html xmlns=";

复制代码 代码如下:

<head>

<!DOCTYPE html>
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js动态拉长表格数据_2 使用insertRow和insertCell方法完结</title>

    <title></title>

<script type="text/javascript">

 

var mailArr = [
{ "title": "一个c#问题", "name": "张三", "date": "2014-03-21" },
{ "title": "一个javascript问题", "name": "李四", "date": "2014-03-21" },
{ "title": "一个c问题", "name": "五五", "date": "2014-03-21" },
{ "title": "一个c 问题", "name": "赵六", "date": "2014-03-21" }
];
var tab = null;
window.onload = function () {
loadTab();
//全选
document.getElementById("selA").onclick = function() {
if (document.getElementById("selA").checked == true) {
seleAll(tab, true);
} else {
seleAll(tab, false);
}
};
//删除全体的当选的
document.getElementById("delSel").onclick = function() {
//遍历全数的input控件即可(除了尾数全采取的checkbox)

    <script language="javascript" type="text/javascript">

var chks = document.getElementsByTagName('input');

        function addRow() {

for (var i = chks.length - 2; i >=0; i--) {
var chk = chks[i];
if (chk.checked==true) {
//选中央银行删除管理
var rowNow = chk.parentNode.parentNode;
rowNow.parentNode.removeChild(rowNow);
} else {
alert("really");
}
}
};

            var newTR = document.getElementById("testTable").insertRow(document.getElementById("testTable").rows.length);

};

 

function loadTab() {
tab = document.getElementById("tb");
//把mailArr循环遍历方式以tr的点子参预表格中
for (var rowindex = 0; rowindex < mailArr.length; rowindex ) {
//var tr = tab.insertRow(-1);//-1指末了一行

            var newNameTD = newTR.insertCell(0);

var tr = tab.insertRow(tab.rows.length - 1);//插入到末二行,最终一行要给全选那一行保留着
var td1 = tr.insertCell(-1);
td1.innerHTML = "<input type='checkbox'/>";
var td2 = tr.insertCell(-1);
td2.innerHTML = mailArr[rowindex].title;
var td3 = tr.insertCell(-1);
td3.innerHTML = mailArr[rowindex].name;
var td4 = tr.insertCell(-1);
td4.innerHTML = mailArr[rowindex].date;
}
}
//要使全选开关生效,将在遍历全部的报表的行

            newNameTD.innerHTML = "aa";

function seleAll(mailTab, isSel) {
for (var i = 0; i < mailTab.rows.length; i ) {
var tr = mailTab.rows[i];
tr.cells[0].childNodes[0].checked = isSel;
}
}
</script>

 

</head>
<body>
<table id="tb" border="1" style="border-collapse: collapse;">
<tr>
<th>序列</th>
<th>标题</th>
<th>发邮人</th>
<th>发件时间</th>
</tr>
<!-- 循环扩大 -->

            var newNameTD = newTR.insertCell(1);

<!-- 全选 -->
<tr>
<td colspan="4">
<input id="selA" type="checkbox" /><label for="selA">全选</label>
<a href="#" id="delSel">删除</a></td>
</tr>
</table>
</body>
</html>

            newNameTD.innerHTML = "<input name='LastName' id='LastName' type='text' />";

您或许感兴趣的篇章:

  • JS完成table表格数据排序效用(可援救动态数据 分页效果)
  • JS达成动态变化表格并付诸表格数据向后端
  • javascript动态拉长表格数据行(ASP后台数据库保存例子)
  • JavaScript中动态向表格增多数据

 

            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>

本文由澳门威利斯人发布于办公软件,转载请注明出处:js添加table的行和列

关键词: 澳门威利斯人