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>

js獲取表格方法

相關文章