js添加table的行和列 具体实现方法
<!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>
相关推荐
-
JS使用for循环遍历Table的所有单元格内容
JS遍历Table的所有单元格内容思路是遍历Table的所有Row,遍历Row中的每一列,获取Table中单元格的内容 function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row for (var j
-
利用js制作html table分页示例(js实现分页)
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 复制代码 代码如下: <script type="text/javascript"> var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage; //最后页 var
-
Js实现动态添加删除Table行示例
最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu
-
JS动态添加Table的TR，TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title></title> <SCRIPT language="JavaScript"> var tempRow=0; var maxRows=0; function insertRows(){ tempRow=table1.rows.length-1; maxRows=t
-
Js获取table当前tr行的值的代码
下面的代码主要是学习控制表格里面的一些操作,代码都是直接写在表格里面的, 大家可以改成事件绑定的. Js获取 table当前行的值 var selectedTr=null; function c1(obj){ obj.style.backgroundColor='blue'; //把点到的那一行变希望的颜色; if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor"); if(selectedTr==
-
JS获取Table中td值的方法
本文实例讲述了JS获取Table中td值的方法.分享给大家供大家参考.具体如下: 1.当要获取多行中的任意TD时,采用给每个TD设置一个共同的class 复制代码 代码如下: <tr> <td style="display: none" id="td2">002</td> <td style="text-align: left;text-decoration:underline;" i
-
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
先上效果图: CSS: 复制代码 代码如下: body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;} .tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}.seltab{position:absolute;width:15px;height:15px;cursor:pointer;background:url(images/selta
-
javascript table美化鼠标滑动单元格变色
http://www.w3.org/TR/html4/strict.dtd"> orbitz-like behavior for hovering over table cells .cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;} .cssguycomments p {font:normal 12px/18px verdana;} table {border-collapse:coll
-
javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创
从cnblogs看到的代码,作者的代码随便不兼容firefox但,有助于大家学习为什么下面的代码兼容了firefox,大家可以对比下,有助于学习,对于更多的文章可以参考我们以前发布的文章. function mouseover(){ var ObjTd=window.event.srcElement; var ObjTr=ObjTd.parentElement; var y=ObjTr.rowIndex; var x=ObjTd.cellIndex; alert(x+" "+y); }
-
JS 实现Table相同行的单元格自动合并示例代码
代码如下,可直接运行: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME=&q
-
javascript实现的使用方向键控制光标在table单元格中切换
效果截图: html 代码: 复制代码 代码如下: <!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> <titl
-
JS实现动态修改table及合并单元格的方法示例
本文实例讲述了JS实现动态修改table及合并单元格的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-
-
JS与jQuery遍历Table所有单元格内容的方法
本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /