1.一般的表格结构如下
<table>
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>fdipzone</td>
</tr>
<tr>
<td>2</td>
<td>wing</td>
</tr>
</table>
2.遍历表格中所有内容方法
首先需要給table加上id，这样方便定位到哪一个表格，例如
<table id=”mytable”></table>
获取表格行数
<script type=”text/javascript”>
/**
* 获取表格行数
* @param Int id 表格id
* @return Int
*/
function getTableRowsLength(id){
var mytable = document.getElementById(id);
return mytable.rows.length;
}
</script>
获取表格某一行列数
<script type=”text/javascript”>
/**
* 获取表格某一行列数
* @param Int id 表格id
* @param Int index 行数
* @return Int
*/
function getTableRowCellsLength(id, index){
var mytable = document.getElementById(id);
if(index<mytable.rows.length){
return mytable.rows[index].cells.length;
}else{
return 0;
}
}
</script>
遍历表格内容保存到数组
<script type=”text/javascript”>
/**
* 遍历表格内容返回数组
* @param Int id 表格id
* @return Array
*/
function getTableContent(id){
var mytable = document.getElementById(id);
var data = [];
for(var i=0,rows=mytable.rows.length; i<rows; i++){
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
if(!data[i]){
data[i] = new Array();
}
data[i][j] = mytable.rows[i].cells[j].innerHTML;
}
}
return data;
}
</script>
3.遍历表格内容完整例子
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>
<title> 获取表格内容 </title>
<style type=”text/css”>
table{width:300px; border:1px solid #000000; border-collapse:collapse;}
td{border:1px solid #000000; border-collapse:collapse;}
</style>
<script type=”text/javascript”>
/**
* 遍历表格内容返回数组
* @param Int id 表格id
* @return Array
*/
function getTableContent(id){
var mytable = document.getElementById(id);
var data = [];
for(var i=0,rows=mytable.rows.length; i<rows; i++){
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
if(!data[i]){
data[i] = new Array();
}
data[i][j] = mytable.rows[i].cells[j].innerHTML;
}
}
return data;
}
/**
* 显示表格内容
* @param Int id 表格id
*/
function showTableContent(id){
var data = getTableContent(id);
var tmp = ”;
for(i=0,rows=data.length; i<rows; i++){
for(j=0,cells=data[i].length; j<cells; j++){
tmp += data[i][j] + ‘,’;
}
tmp += ‘<br>’;
}
document.getElementById(‘result’).innerHTML = tmp;
}
</script>
</head>
<body>
<table id=”mytable”>
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>fdipzone</td>
</tr>
<tr>
<td>2</td>
<td>wing</td>
</tr>
</table>
<p><input type=”button” name=”btn” value=”获取表格数据” οnclick=”showTableContent(‘mytable’)”></p>
<p><div id=”result”></div></p>
</body>
</html>
js动态修改、获取table单元格的内容
2014-12-10 斗进馆 + 关注献花(0)
<table border=1 width=200 height=150 id=’tab’>
<tr><td>111</td><td>111</td></tr>
<tr><td>222</td><td>222</td></tr>
<tr><td>333</td><td>333</td></tr>
<tr><td>444</td><td>444</td></tr>
</table>
<p align=center><input type=’button’ οnclick=’change()’>
<script>
function change(){
document.getElementById(‘tab’).rows[0].childNodes[0].innerText = ‘aaa’;
}
</script>
——————————————————————————–
<table id=”test”>
<tr>
<td>hello</td>
</tr>
</table>
<script language=”JavaScript”>
alert(document.getElementById(“test”).rows[0].cells[0].innerText);
</script>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
</head>
<body>
<table id=”tb”>
<tr>
<td>title</td>
<td>title1</td>
</tr>
<tr>
<td>test</td>
<td>test1</td>
</tr>
</table>
<input type=”button” onClick=”show(tb,result);” value=”获取”>
<input type=”text” size=10 name=”result”>
<script language=”javascript”>
function show(tb,txt)
{
document.all.result.value=document.all.tb.rows(1).cells(1).innerHTML;
}
</script>
<table width=”800″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><span id=”feedback_info” style=”color:#FF0000″></span></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script>
document.getElementById(“feedback_info”).innerHTML=”aaaaaa”;
document.all.tb.rows(0).cells(1).innerHTML=”aaaaaa”;
</script>
</body>
</html>
js获得<table>的单元格信息
1. 获取表格中的某个单元格的内容
var tid=listFrame.now.rows[1].cells[2].innerHTML;
listFrame是指某一窗口或者frame
now 是表格的id
rows[i] 是指某一行 比如属性:length
cells[j] 是指某一个单元格 rows[i].cells[j]表示第i行第j列
innerHTML是指单元格的值
2 只刷新一次
function reurl(){
url = location.href; //把当前页面的地址赋给变量 url
var times = url.split(“?”); //分切变量 url 分隔符号为 “?”
if(times[1] != 1){ //如果?后的值不等于1表示没有刷新
url += “?1”; //把变量 url 的值加入 ?1
parent.parent.location.reload() //刷新页面
}
else{
reutrn false;
}
}
动态表格
动态表格彻底研究
对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术
1 1 1 1
2 2 2 2
3 3 3 3
4 4 4 4
5 55 5
6 6 6 56
777 7 77 7
88 8 88 77
999 99 99 999
10 10 10 10
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>动态表格</title>
</head>
<body>
<p>动态表格彻底研究</p>
<p>对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术</p>
<p>
<input type=”button” name=”Submit” value=”刷新” οnclick=”onRefresh()” />
<input type=”button” name=”Submit2″ value=”全选” οnclick=”selectall()”/>
<input type=”button” name=”Submit8″ value=”反选” οnclick=”inverse()” />
<input type=”button” name=”Submit3″ value=”不选” οnclick=”noselect()”/>
<input type=”button” name=”Submit4″ value=”添加行与列” οnclick=”insert_row()” />
<input type=”button” name=”Submit7″ value=”删除选择” οnclick=”delRow()” />
<input type=”button” name=”Submit5″ value=”拷贝选择” οnclick=”copyRow()”/>
<input type=”button” name=”Submit92″ value=”居中对齐” οnclick=”tableAlign()”/>
<input type=”button” name=”Submit922″ value=”隔行变色” οnclick=”changeColor()”/>
</p>
<table width=”50%” border=”1″ cellpadding=”1″ cellspacing=”2″ bordercolor=”#CCCCCC” id=”myTable”>
<tr>
<td width=”7%”>
<label>
<input type=”checkbox” name=”checkbox” value=”checkbox” />
</label> </td>
<td width=”51%”>1</td>
<td width=”14%”>1</td>
<td width=”14%”>1</td>
<td width=”14%”>1</td>
</tr>
<tr>
<td><input type=”checkbox” name=”checkbox2″ value=”checkbox” /></td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type=”checkbox” name=”checkbox3″ value=”checkbox” /></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td><input type=”checkbox” name=”checkbox4″ value=”checkbox” /></td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td><input type=”checkbox” name=”checkbox5″ value=”checkbox” /></td>
<td>5</td>
<td colspan=”2″>55</td>
<td>5</td>
</tr>
<tr>
<td><input type=”checkbox” name=”checkbox6″ value=”checkbox” /></td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>56</td>
</tr>
<tr>
<td><input type=”checkbox” name=”checkbox7″ value=”checkbox” /></td>
<td>777</td>
<td>7</td>
<td>77</td>
<td>7</td>
</tr>
<tr>
<td><input type=”checkbox” name=”checkbox8″ value=”checkbox” /></td>
<td>88</td>
<td>8</td>
<td>88</td>
<td>77</td>
</tr>
<tr>
<td><input type=”checkbox” name=”checkbox9″ value=”checkbox” /></td>
<td>999</td>
<td>99</td>
<td>99</td>
<td>999</td>
</tr>
<tr>
<td><input type=”checkbox” name=”checkbox10″ value=”checkbox” /></td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</table>
<br />
<p></p>
<script type=”text/javascript”>
var form = document.forms[“form1”];
var table = document.getElementById(“myTable”);
var selectBox = table.getElementsByTagName(“input”);
var tr = table.getElementsByTagName(“tr”);
var clicked = true;
function insert_row(){
//alert(table.rows[0].cells.length)
var thisrow = table.insertRow(0);
var thiscell = thisrow.insertCell(0);
thiscell.innerHTML = “<input type=\”checkbox\” name=\”checkbox10\” value=\”checkbox\” />”;
var thiscell1 = thisrow.insertCell(1);
thiscell1.innerHTML = “cell”;
var thiscell2 = thisrow.insertCell(2);
thiscell2.innerHTML = “cell”;
var thiscell3 = thisrow.insertCell(3);
thiscell3.innerHTML = “cell”;
var thiscell4 = thisrow.insertCell(4);
thiscell4.innerHTML = “cell”;
thiscell4.align = “center”;
}
function insert_Cell(){
var y = table.rows[0].insertCell(0);
y.colSpan=”2″;
y.innerHTML = “sssss”;
}
function selectall(){
for(i=0;i<selectBox.length;i++){
selectBox[i].checked = true;
}
}
function noselect(){
for(i=0;i<selectBox.length;i++){
selectBox[i].checked = false;
}
}
function inverse(){
for(i=0;i<selectBox.length;i++){
if(selectBox[i].checked){
selectBox[i].checked = false;
}else{
selectBox[i].checked = true;
}
}
}
function delRow(){
for(i=selectBox.length-1;i>=0;i–){
//alert(typeof(selectBox[i]));
if(selectBox[i].checked){
table.deleteRow(i);
}
}
}
function onRefresh(){
location.reload();
}
function copyRow(){
for(i=0;i<selectBox.length;i++){
if(selectBox[i].checked){
//var copytable = document.getElementById(“copyTable”);
var tablerow = table.insertRow(table.rows.length);
tablerow.innerHTML = table.rows[i].innerHTML;
}
}
}
function tableAlign(){
for(i=0;i<selectBox.length;i++){
if(selectBox[i].checked && clicked){
table.rows[i].align = “center”;
}
}
}
function changeColor(){
var skip = true;
for(i=0;i<tr.length;i++){
if(skip){
tr[i].bgColor = “#cccccc”;
skip = false;
}else{
tr[i].bgColor = “#ffffff”;
skip = true;
}
}
}
</script>
</body>
</html>
转载请注明出处：http://www.cnblogs.com/NNUF/
永恒de影シ刚子的软件之路博客园闪存首页新随笔管理
随笔- 165 文章- 52 评论- 69
js中对表格的操作总结
inserRow()和insertCell()方法
首先，表格行索引从0开始。
inserRow()：
这个函数将新行添加到index的那一行前，
比如insertRow(0),是将新行添加到第一行之前。
默认的insertRow()函数相当于 insertRow(-1)，将新行添加到表的最后。
objTable.insertRow (objTable.rows.length).就是为表格objTable在最后新增一行。
insertCell()和insertRow（）的用法相同，这里就不再说了。
deleteRow()和deleteCell()方法
deleteRow(index)：index从0开始
删除指定位置的行和单元格。要传入的参数：Index是行在表格中的位置，可以下面的方法取得然后去删除：
var row=document.getElementById(“行的Id”);
var index=row.rowIndex; //有这个属性，嘿嘿
objTable.deleteRow(index);
注意：
删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的
错误JS代码：
function clearRow()
{
objTable= document.getElementById(“myTable”);
var length = objTable.rows.length
for( var i=1; i<length ; i++ )
{
tblObj.deleteRow(i);
//应该是deleteRow(1)。因为在删除表格行的时候，表格的行数在变化，这就是问题的关键，rows.length总是在变小，删除的行数总是会比预想的要少一半
}
}
正确JS代码：
function clearRow()
{
objTable= document.getElementById(“myTable”);
for( var i=1; i<objTable.rows.length ; i++ )
{
tblObj.deleteRow(1);
}
}
事例：
HTML代码：
<table width=100% cellpadding=0 cellspacing=0 style=”font-size:13px” id=”usergrouptable”>
<tr style=”background-image: url(../image/titlelan.gif);color:white” height=30 >
<td colspan=3> 用户组管理<span οnclick=”CloseDiv();” style=”margin-
left:200px;width:20px;cursor:hand”> </span></td>
</tr>
<tr>
<td>用户组ID</td>
<td>用户组名</td>
<td>操作<input type=”button” οnclick=”AddRow(‘usergrouptable’);” value=”+”></td>
</tr>
<tr id=”row3″>
<td><input type=text id=’txti3′ class=’textStyle’> </td>
<td><input type=button id=’del3′ value=’删除’ align=’absmiddle’ οnclick=”deleteTheRow(‘row3’);”></td>
<td>操作<input type=”button” οnclick=”AddRow(‘usergrouptable’);” value=”+”></td>
</tr>
</table>
JS代码：
var id= 4;
//表格增加行
function AddRow(tablename)
{
var tab=document.getElementById(tablename);
var row=tab.insertRow(-1);
/*添加行id*/
row.id=”row”+id;
var cell1=row.insertCell(-1);
var cell2=row.insertCell(-1);
var cell3=row.insertCell(-1);
cell1.innerHTML = “<input type=’text’ id=’txti”+id+”‘ class=’textStyle’ value=”+id+”>”;
cell2.innerHTML = “<input type=button id=’del”+id+”‘ value=’删除’ align=’absmiddle’ οnclick=\”deleteTheRow(‘row”+id+”‘);\”>”;
cell3.innerHTML = “<input type=’button’ οnclick=\”AddRow(‘usergrouptable’);\” value=’+’>”;
id++;
}
//删除行
function deleteTheRow(rowid)
{
if(confirm(“确定删除此项吗？”))
{
var tab = document.getElementById(“usergrouptable”);
var row = document.getElementById(rowid);
var inx = row.rowIndex;/*获得行号rowIndex*/
//var inx = document.getElementById(“del3”).parentElement.parentElement.rowIndex;
tab.deleteRow(inx);/*删除此行*/
alert(“删除成功！”);
}
}
Html代码
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>www.yuanshi88.com</title>
<style>
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
table {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif
}
td {
text-align: center;
background: #FFF
}
tr {
height: 20px;
}
th {
background: #9DACBF;
color: #FFF;
height: 20px;
line-height: 20px
}
a {
color: #99C;
}
a:hover {
color: #F93
}
.input td {
padding: 2px
}
.input input {
width: 100%;
border: 1px solid #000;
overflow: hidden
}
.btn {
}
</style>
<script src=”jquery-1.2.6.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
//简化document.getElementById()方法
function getObj(obj){
return document.getElementById(obj);
}
function insRow(){
//插入行
var obj=getObj(“nw”);
var newRow=obj.insertRow(obj.rows.length); //插入行方法
var newCell1=newRow.insertCell(newRow.cells.length); //插入单元格 如果直接用insertCell()在FF里会出错，所以为了兼容，我们要加上newRow.cells.length参数
var newCell2=newRow.insertCell(newRow.cells.length);
var newCell3=newRow.insertCell(newRow.cells.length);
newCell1.innerHTML=getObj(“name”).value; //插入单元格后，现在向单元格中添加内容
newCell2.innerHTML=getObj(“add”).value;
//清空文本框
document.all(“name”).value=””;
document.all(“add”).value=””;
//将当前表格最后一行的序号写在delRow()方法中，这样我们可以在delRow()方法中删除当前行
newCell3.innerHTML='<a href=”javascript:delRow(‘+(obj.rows.length-1)+’)”>删除</a>|<a href=”javascript:editRow(‘+(obj.rows.length-1)+’)”>修改</a>’;
}
//删除行
function delRow(i){
var obj=getObj(“nw”);
obj.deleteRow(i);
}
//修改行
function editRow(i){
var tab=getObj(“nw”);
getObj(“name”).value=tab.rows(i).cells(0).innerText;
getObj(“add”).value=tab.rows(i).cells(1).innerText;
document.getElementById(“Insert”).style.display=”none”;
document.getElementById(“Save”).style.display=”block”;
document.getElementById(“CurrentRow”).value=i;
}
function saveRow(){
var i=document.getElementById(“CurrentRow”).value-0;
var tab=getObj(“nw”);
tab.rows(i).cells(0).innerText= getObj(“name”).value;
tab.rows(i).cells(1).innerText=getObj(“add”).value;
getObj(“name”).value=””;
getObj(“add”).value=””;
document.getElementById(“Insert”).style.display=”block”;
document.getElementById(“Save”).style.display=”none”;
}
</script>
<title>Javascript控制表格 实现动态添加和删除表格内容</title>
</head>
<body>
<input type=”hidden” id=”CurrentRow”>
<table id=”nw” cellpadding=”0″ cellspacing=”1″ border=”0″ width=”320″ bgcolor=”#CCCC99″>
<th>编号</th>
<th>名称</th>
<th>操作</th>
<tr class=”input”>
<td><input type=”text” id=”name” /></td>
<td><input type=”text” id=”add” /></td>
<td style=”width: 52px”><input id=”Insert” type=”button” value=”添 加” class=”btn”
onClick=”insRow()” /><input id=”Save” type=”button” value=”保存” class=”btn” onClick=”saveRow()”
style=”display: none” /></td>
</tr>
</table>
</body>
</html>