js获取表格方法

最新推荐文章于 2022-07-25 20:03:13 发布

zhyp29

最新推荐文章于 2022-07-25 20:03:13 发布

阅读量709

点赞数 1

分类专栏： javascript常见问题文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/zhyp29/article/details/84796703

版权

javascript常见问题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文将介绍如何使用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="获取表格数据" ο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>

zhyp29

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js获取表格方法

本文将介绍如何使用js获取表格内某一单元格的内容，表格由table,tr,td等html标记组成。table表示表格，tr表示行，td表示行中列。 1.一般的表格结构如下 id name 1 fdipzone 2 wing 2.遍历表格中所有内容方法首先需要給table加上id，这...
复制链接

扫一扫