js获取表格方法

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

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="获取表格数据" onclick="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' onclick='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="刷新" onclick="onRefresh()" />
    <input type="button" name="Submit2" value="全选" onclick="selectall()"/>
    <input type="button" name="Submit8" value="反选" onclick="inverse()" />
    <input type="button" name="Submit3" value="不选" onclick="noselect()"/>
    <input type="button" name="Submit4" value="添加行与列" onclick="insert_row()" />
    <input type="button" name="Submit7" value="删除选择" onclick="delRow()" />
    <input type="button" name="Submit5" value="拷贝选择" onclick="copyRow()"/>
    <input type="button" name="Submit92" value="居中对齐" onclick="tableAlign()"/>
    <input type="button" name="Submit922" value="隔行变色" onclick="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 onclick="CloseDiv();" style="margin-
                                 left:200px;width:20px;cursor:hand"> </span></td>
          </tr>
          <tr>
            <td>用户组ID</td>
            <td>用户组名</td>
            <td>操作<input type="button" onclick="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' onclick="deleteTheRow('row3');"></td>
            <td>操作<input type="button" onclick="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'  onclick=\"deleteTheRow('row"+id+"');\">";
cell3.innerHTML = "<input type='button' onclick=\"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>

猜你喜欢