js添加table的行和列 具體實(shí)現(xiàn)方法
更新時(shí)間：2013年07月22日 10:39:59 作者：
這篇文章介紹了js添加table的行和列 具體實(shí)現(xiàn)方法，有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<!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對(duì)象
var table = document.getElementById("table_info2");
//找到要添加button的td，這里以表格第一行第一列為例子
var oTd = table.rows[0].cells[0];
//添加button到td中，添加前吧td內(nèi)容清空并賦予button的代碼
oTd.innerHTML = "<button onclick='insertRow22()'>添加收費(fèi)</button>";
}
function insertRow22() {
var oTable = document.getElementById("table_info2");
var oTr = oTable.insertRow();
var oTd = oTr.insertCell();
oTd.innerHTML = "新添加了一行";
}
function insertRow3() {
//獲取table對(duì)象
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="連續(xù)添加列" 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="添加一個(gè)table" onclick="tableDiv();" />
<div id="tableDiv" />
</div>
<br />
<hr />
<br />
<div>
<input type="button" value="連續(xù)添加table" onclick="init();" />
</div>
</body>
</html>
您可能感興趣的文章:
- JS與jQuery遍歷Table所有單元格內(nèi)容的方法
- JS使用for循環(huán)遍歷Table的所有單元格內(nèi)容
- JS 實(shí)現(xiàn)Table相同行的單元格自動(dòng)合并示例代碼
- 用js實(shí)現(xiàn)table單元格高寬調(diào)整,兼容合并單元格(兼容IE6、7、8、FF)實(shí)例
- javascript實(shí)現(xiàn)的使用方向鍵控制光標(biāo)在table單元格中切換
- javascript 移動(dòng)鼠標(biāo)得到單元格所在table表中的rowIndex位置[兼容ie,firefox]
- javascript table美化鼠標(biāo)滑動(dòng)單元格變色
- 利用js制作html table分頁示例(js實(shí)現(xiàn)分頁)
- Js獲取table當(dāng)前tr行的值的代碼
- JS動(dòng)態(tài)添加Table的TR，TD實(shí)現(xiàn)方法
- JS獲取Table中td值的方法
- Js實(shí)現(xiàn)動(dòng)態(tài)添加刪除Table行示例
- JS實(shí)現(xiàn)動(dòng)態(tài)修改table及合并單元格的方法示例
相關(guān)文章
本文主要介紹js實(shí)現(xiàn)上下左右彈框劃出效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
js實(shí)現(xiàn)時(shí)間日期的相加相減代碼示例
這篇文章主要給大家介紹了關(guān)于利用js實(shí)現(xiàn)時(shí)間日期的相加相減的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考解決價(jià)值,需要的朋友可以參考下2023-09-09
List the Codec Files on a Computer
List the Codec Files on a Computer...2007-06-06
JavaScript詳細(xì)分析數(shù)據(jù)類型和運(yùn)算符
這篇文章主要介紹了JavaScript數(shù)據(jù)類型和運(yùn)算符案例,結(jié)合實(shí)例形式分析了JavaScript數(shù)據(jù)類型和運(yùn)算符特性與相關(guān)操作技巧,需要的朋友可以參考下2022-07-07
Promise是異步編程的一種解決方案，在ES6中Promise被列為了正式規(guī)范，統(tǒng)一了用法，原生提供了Promise對(duì)象。接下來通過本文給大家介紹Promise的介紹及基本用法，感興趣的朋友一起看看吧2021-10-10
首先是通過同步策略來實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離，接著是通過異步策略來實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離2012-08-08
js中利用cookie實(shí)現(xiàn)記住密碼功能
這篇文章主要為大家詳細(xì)介紹了js中利用cookie實(shí)現(xiàn)記住密碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了兼容所有瀏覽器的js復(fù)制插件Zero的使用,需要的朋友可以參考下2014-03-03
如何手動(dòng)實(shí)現(xiàn)es5中的bind方法詳解
這篇文章主要給大家介紹了關(guān)于如何手動(dòng)實(shí)現(xiàn)es5中的bind方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
JavaScript使用atan2來繪制箭頭和曲線的實(shí)例
下面小編就為大家?guī)硪黄狫avaScript使用atan2來繪制箭頭和曲線的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09