js获取表格方法

HTML混合APP开发

2016-05-07

关注关注

本文将介绍如何使用js获取表格内某一单元格的内容，表格由table,tr,td等html标记组成。table表示表格，tr表示行，td表示行中列。

1.一般的表格结构如下

<table>

<tr>

</tr>

<tr>

<td>fdipzone</td>

</tr>

<tr>

</tr>

</table>

2.遍历表格中所有内容方法

首先需要給table加上id，这样方便定位到哪一个表格，例如

<tableid="mytable"></table>

获取表格行数

<scripttype="text/javascript">

/**

*获取表格行数

*@paramIntid表格id

*@returnInt

functiongetTableRowsLength(id){

varmytable=document.getElementById(id);

returnmytable.rows.length;

}

</script>

获取表格某一行列数

<scripttype="text/javascript">

/**

*获取表格某一行列数

*@paramIntid表格id

*@paramIntindex行数

*@returnInt

functiongetTableRowCellsLength(id,index){

varmytable=document.getElementById(id);

if(index<mytable.rows.length){

returnmytable.rows[index].cells.length;

}else{

return0;

}

</script>

遍历表格内容保存到数组

<scripttype="text/javascript">

/**

*遍历表格内容返回数组

*@paramIntid表格id

*@returnArray

functiongetTableContent(id){

varmytable=document.getElementById(id);

vardata=[];

for(vari=0,rows=mytable.rows.length;i<rows;i++){

for(varj=0,cells=mytable.rows[i].cells.length;j<cells;j++){

if(!data[i]){

data[i]=newArray();

}

data[i][j]=mytable.rows[i].cells[j].innerHTML;

}

returndata;

}

</script>

3.遍历表格内容完整例子

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">

<html>

<head>

<metahttp-equiv="content-type"content="text/html;charset=utf-8">

<title>获取表格内容</title>

<styletype="text/css">

table{width:300px;border:1pxsolid#000000;border-collapse:collapse;}

td{border:1pxsolid#000000;border-collapse:collapse;}

</style>

<scripttype="text/javascript">

/**

*遍历表格内容返回数组

*@paramIntid表格id

*@returnArray

functiongetTableContent(id){

varmytable=document.getElementById(id);

vardata=[];

for(vari=0,rows=mytable.rows.length;i<rows;i++){

for(varj=0,cells=mytable.rows[i].cells.length;j<cells;j++){

if(!data[i]){

data[i]=newArray();

}

data[i][j]=mytable.rows[i].cells[j].innerHTML;

}

returndata;

}

/**

*显示表格内容

*@paramIntid表格id

functionshowTableContent(id){

vardata=getTableContent(id);

vartmp='';

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>

<tableid="mytable">

<tr>

</tr>

<tr>

<td>fdipzone</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

js动态修改、获取table单元格的内容

2014-12-10斗进馆+关注献花(0)

<tableborder=1width=200height=150id='tab'>

</table>

<palign=center><inputtype='button'onclick='change()'>

functionchange(){

document.getElementById('tab').rows[0].childNodes[0].innerText='aaa';

}

</script>

--------------------------------------------------------------------------------

<tableid="test">

<tr>

<td>hello</td>

</tr>

</table>

<scriptlanguage="JavaScript">

alert(document.getElementById("test").rows[0].cells[0].innerText);

</script>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>无标题文档</title>

</head>

<body>

<tableid="tb">

<tr>

<td>title</td>

<td>title1</td>

</tr>

<tr>

</tr>

</table>

<inputtype="button"onClick="show(tb,result);"value="获取">

<inputtype="text"size=10name="result">

<scriptlanguage="javascript">

functionshow(tb,txt)

{

document.all.result.value=document.all.tb.rows(1).cells(1).innerHTML;

}

</script>

<tablewidth="800"border="0"cellspacing="0"cellpadding="0">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

document.getElementById("feedback_info").innerHTML="aaaaaa";

document.all.tb.rows(0).cells(1).innerHTML="aaaaaa";

</script>

</body>

</html>

js获得<table>的单元格信息

1.获取表格中的某个单元格的内容

vartid=listFrame.now.rows[1].cells[2].innerHTML;

listFrame是指某一窗口或者frame

now是表格的id

rows[i]是指某一行比如属性:length

cells[j]是指某一个单元格rows[i].cells[j]表示第i行第j列

innerHTML是指单元格的值

2只刷新一次

functionreurl(){

url=location.href;//把当前页面的地址赋给变量url

vartimes=url.split("?");//分切变量url分隔符号为"?"

if(times[1]!=1){//如果?后的值不等于1表示没有刷新

url+="?1";//把变量url的值加入?1

parent.parent.location.reload()//刷新页面

}

else{

reutrnfalse;

}

动态表格

动态表格彻底研究

对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术

1111

2222

3333

4444

5555

66656

7777777

8888877

9999999999

10101010

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

</head>

<body>

<p>动态表格彻底研究</p>

<p>对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术</p>

<p>

<inputtype="button"name="Submit"value="刷新"onclick="onRefresh()"/>

<inputtype="button"name="Submit2"value="全选"onclick="selectall()"/>

<inputtype="button"name="Submit8"value="反选"onclick="inverse()"/>

<inputtype="button"name="Submit3"value="不选"onclick="noselect()"/>

<inputtype="button"name="Submit4"value="添加行与列"onclick="insert_row()"/>

<inputtype="button"name="Submit7"value="删除选择"onclick="delRow()"/>

<inputtype="button"name="Submit5"value="拷贝选择"onclick="copyRow()"/>

<inputtype="button"name="Submit92"value="居中对齐"onclick="tableAlign()"/>

<inputtype="button"name="Submit922"value="隔行变色"onclick="changeColor()"/>

</p>

<tablewidth="50%"border="1"cellpadding="1"cellspacing="2"bordercolor="#CCCCCC"id="myTable">

<tr>

<tdwidth="7%">

<label>

<inputtype="checkbox"name="checkbox"value="checkbox"/>

</label></td>

<tdwidth="51%">1</td>

<tdwidth="14%">1</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<tdcolspan="2">55</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br/>

<p></p>

<scripttype="text/javascript">

varform=document.forms["form1"];

vartable=document.getElementById("myTable");

varselectBox=table.getElementsByTagName("input");

vartr=table.getElementsByTagName("tr");

varclicked=true;

functioninsert_row(){

//alert(table.rows[0].cells.length)

varthisrow=table.insertRow(0);

varthiscell=thisrow.insertCell(0);

thiscell.innerHTML="<inputtype=\"checkbox\"name=\"checkbox10\"value=\"checkbox\"/>";

varthiscell1=thisrow.insertCell(1);

thiscell1.innerHTML="cell";

varthiscell2=thisrow.insertCell(2);

thiscell2.innerHTML="cell";

varthiscell3=thisrow.insertCell(3);

thiscell3.innerHTML="cell";

varthiscell4=thisrow.insertCell(4);

thiscell4.innerHTML="cell";

thiscell4.align="center";

}

functioninsert_Cell(){

vary=table.rows[0].insertCell(0);

y.colspan="2";

y.innerHTML="sssss";

}

functionselectall(){

for(i=0;i<selectBox.length;i++){

selectBox[i].checked=true;

}

functionnoselect(){

for(i=0;i<selectBox.length;i++){

selectBox[i].checked=false;

}

functioninverse(){

for(i=0;i<selectBox.length;i++){

if(selectBox[i].checked){

selectBox[i].checked=false;

}else{

selectBox[i].checked=true;

}

functiondelRow(){

for(i=selectBox.length-1;i>=0;i--){

//alert(typeof(selectBox[i]));

if(selectBox[i].checked){

table.deleteRow(i);

}

functiononRefresh(){

location.reload();

}

functioncopyRow(){

for(i=0;i<selectBox.length;i++){

if(selectBox[i].checked){

//varcopytable=document.getElementById("copyTable");

vartablerow=table.insertRow(table.rows.length);

tablerow.innerHTML=table.rows[i].innerHTML;

}

functiontableAlign(){

for(i=0;i<selectBox.length;i++){

if(selectBox[i].checked&&clicked){

table.rows[i].align="center";

}

functionchangeColor(){

varskip=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是行在表格中的位置，可以下面的方法取得然后去删除：

varrow=document.getElementById("行的Id");

varindex=row.rowIndex;//有这个属性，嘿嘿

objTable.deleteRow(index);

注意：

删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的

错误JS代码：

functionclearRow()

{

objTable=document.getElementById("myTable");

varlength=objTable.rows.length

for(vari=1;i<length;i++)

{

tblObj.deleteRow(i);

//应该是deleteRow(1)。因为在删除表格行的时候，表格的行数在变化，这就是问题的关键，rows.length总是在变小，删除的行数总是会比预想的要少一半

}

正确JS代码：

functionclearRow()

{

objTable=document.getElementById("myTable");

for(vari=1;i<objTable.rows.length;i++)

{

tblObj.deleteRow(1);

}

事例：

HTML代码：

<tablewidth=100%cellpadding=0cellspacing=0style="font-size:13px"id="usergrouptable">

<trstyle="background-image:url(../image/titlelan.gif);color:white"height=30>

<tdcolspan=3>   用户组管理<spanonclick="CloseDiv();"style="margin-

left:200px;width:20px;cursor:hand"> </span></td>

</tr>

<tr>

<td>用户组ID</td>

</tr>

<trid="row3">

</tr>

</table>

JS代码：

varid=4;

//表格增加行

functionAddRow(tablename)

{

vartab=document.getElementById(tablename);

varrow=tab.insertRow(-1);

/*添加行id*/

row.id="row"+id;

varcell1=row.insertCell(-1);

varcell2=row.insertCell(-1);

varcell3=row.insertCell(-1);

cell1.innerHTML="<inputtype='text'id='txti"+id+"'class='textStyle'value="+id+">";

cell2.innerHTML="<inputtype=buttonid='del"+id+"'value='删除'align='absmiddle'onclick=\"deleteTheRow('row"+id+"');\">";

cell3.innerHTML="<inputtype='button'onclick=\"AddRow('usergrouptable');\"value='+'>";

id++;

}

//删除行

functiondeleteTheRow(rowid)

{

if(confirm("确定删除此项吗？"))

{

vartab=document.getElementById("usergrouptable");

varrow=document.getElementById(rowid);

varinx=row.rowIndex;/*获得行号rowIndex*/

//varinx=document.getElementById("del3").parentElement.parentElement.rowIndex;

tab.deleteRow(inx);/*删除此行*/

alert("删除成功！");

}

Html代码

<html>

<head>

<metahttp-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

}

color:#99C;

}

a:hover{

color:#F93

}

.inputtd{

padding:2px

}

.inputinput{

width:100%;

border:1pxsolid#000;

overflow:hidden

}

.btn{

}

</style>

<scriptsrc="jquery-1.2.6.min.js"type="text/javascript"></script>

<scripttype="text/javascript">

//简化document.getElementById()方法

functiongetObj(obj){

returndocument.getElementById(obj);

}

functioninsRow(){

//插入行

varobj=getObj("nw");

varnewRow=obj.insertRow(obj.rows.length);//插入行方法

varnewCell1=newRow.insertCell(newRow.cells.length);//插入单元格如果直接用insertCell()在FF里会出错，所以为了兼容，我们要加上newRow.cells.length参数

varnewCell2=newRow.insertCell(newRow.cells.length);

varnewCell3=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='<ahref="javascript:delRow('+(obj.rows.length-1)+')">删除</a>|<ahref="javascript:editRow('+(obj.rows.length-1)+')">修改</a>';

}

//删除行

functiondelRow(i){

varobj=getObj("nw");

obj.deleteRow(i);

}

//修改行

functioneditRow(i){

vartab=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;

}

functionsaveRow(){

vari=document.getElementById("CurrentRow").value-0;

vartab=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>

<inputtype="hidden"id="CurrentRow">

<tableid="nw"cellpadding="0"cellspacing="1"border="0"width="320"bgcolor="#CCCC99">

<trclass="input">

<tdstyle="width:52px"><inputid="Insert"type="button"value="添加"class="btn"

onClick="insRow()"/><inputid="Save"type="button"value="保存"class="btn"onClick="saveRow()"

style="display:none"/></td>

</tr>

</table>

</body>

</html>

html表格 cells js td

安科网

js获取表格方法

HTML混合APP开发

HTML混合APP开发

相关推荐

js实现表格单列按字母排序

js实现表格数据搜索

表格标签的使用

HTML5标签2

Asp.net Form 动态产生表格核心后台代码

HTML-表格

html学习

通过css润色html表格

html table表格斜线表头的实现方法总汇

2020/6/3 JS 对表格元素进行增删改操作和事件监听

html table表格标签内容如何居中显示？表格的align属性的用法介绍

基于JavaScript实现表格隔行换色

HTML <thead> 标签

HTML <tfoot> 标签

HTML <tbody> 标签

HTML表单

el-table 表格循环多张图片

html表格显示

demo48-表格标签

demo49-表格合并

HTML混合APP开发