这篇文章介绍了js添加table的行和列 具体实现方法
有需要的朋友可以参考一下
复制代码 代码如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<title></title>
<script language="javascript" type="text/javascript">
function addRow() {
var newTR = documentgetElementById("testTable")insertRow(documentgetElementById("testTable")rowslength);
var newNameTD = newTRinsertCell();
newNameTDinnerHTML = "aa";
var newNameTD = newTRinsertCell();
newNameTDinnerHTML = "<input name=LastName id=LastName type=text />";
var newNameTD = newTRinsertCell();
newNameTDinnerHTML = "<input name=BirthDay id=BirthDay type=text />";
var newNameTD = newTRinsertCell();
newNameTDinnerHTML = "<input name=age id=age type=text />";
}
function insertRow() {
var oTable = documentgetElementById("table_info");
var oTr = oTableinsertRow();
var oTd = oTrinsertCell();
oTdinnerHTML = "新添加了一行";
}
function insertRow() {
//获取table对象
var table = documentgetElementById("table_info");
//找到要添加button的td这里以表格第一行第一列为例子
var oTd = tablerows[]cells[];
//添加button到td中添加前吧td内容清空并赋予button的代码
oTdinnerHTML = "<button onclick=insertRow()>添加收费</button>";
}
function insertRow() {
var oTable = documentgetElementById("table_info");
var oTr = oTableinsertRow();
var oTd = oTrinsertCell();
oTdinnerHTML = "新添加了一行";
}
function insertRow() {
//获取table对象
var table = documentgetElementById("table_info");
//找到要添加button的td这里以表格第一行第一列为例子
var oTd = tablerows[]insertCell();
oTdinnerHTML = "&nbps;";
}
function tableDiv() {
var maxRow = ;
var maxCol = ;
var strTbody = ["<table border=><tbody>"];
for (var i = ; i < maxRow; i++) {
strTbodypush("<tr>");
for (var j = ; j < maxCol; j++) {
strTbodypush("<td>test</td>");
}
strTbodypush("</tr>");
}
strTbodypush("</tbody></table>");
var obj = documentgetElementById("tableDiv");
objinnerHTML = strTbodyjoin("");
}
function init() {
var _table _tbody tr td text maxRow maxCol;
var docBody = documentbody;
var _doc = document;
maxRow = ;
maxCol = ;
_table = _doccreateElement("table");
_tableborder = "";
_tablestyletableLayout = "fixed";
_tbody = _doccreateElement("tbody");
_tableinsertBefore(_tbody null);
docBodyinsertBefore(_table null);
for (var i = ; i < maxRow; i++) {
tr = _doccreateElement("tr");
_tbodyinsertBefore(tr null);
for (var j = ; j < maxCol; j++) {
td = _doccreateElement("td");
text = _doccreateTextNode("Text");
tdinsertBefore(text null);
trinsertBefore(td null);
}
}
}
</script>
</head>
<body>
<div>
<table id="testTable" border= cellspacing="">
<tr>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
BirthDay
</th>
<th>
age
</th>
</tr>
<tr>
<td>
Jim
</td>
<td>
Green
</td>
<td>
LA
</td>
<td>
</td>
</tr>
<tr>
<td>
Andrew
</td>
<td>
Hou
</td>
<td>
Xian
</td>
<td>
</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="">
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
</table>
</div>
<br />
<hr />
<br />
<div>
<input type="button" value="按钮中添加行" onclick="insertRow();" />
<table id="table_info" border="">
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
</table>
</div>
<br />
<hr />
<br />
<div>
<input type="button" value="连续添加列" onclick="insertRow();" />
<table id="table_info" border="">
<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>
