看似简单的难题：js怎么取表格中的某一行的值？其实很难！

berg369 2008-09-10 01:48:25

输入时选择关联值时，如输入人员的部门，弹出组织机构窗口选择，这是一个表格，最左侧单元格是单选钮或复选框，选中后点确认时要获取选中行单元格的值，相信大家都这样用过。但我找不到合适的取值方式，有几种方式都不够好：
1、找到选中行的tr,再定位第几个td，然后用innerText取值，首先，firefox不支持innerText,其次，定位td根据索引位置，这个位置可能会被改变；
2、表格同时把值赋给单选或复选钮的value，从单复选钮中获得，这种方式缺点是，如果要返回多个单元格的值（如返回部门、部门负责人、电话），只能在value中用分隔符分开，再字符串分拆取，似乎不是好办法（分隔符不好找，包不准内容中就有），IE可以增加自定义属性如value1放另外的值，但firefox不可以
请高手指点，怎么取最好呢？

...全文

586 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

wo_19860706 2009-04-13

打赏
举报

cigsir写的代码真的很有用，谢谢，受益匪浅啊！

cgisir 2008-09-10

打赏
举报

我上面有个地儿写错了,可能楼主没理解我的意思

按楼主给的代码,重写次,供参考(我用的checkbox, 用radio也一样,不过用checkbox更能说明问题)

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

 <table id="sel">

<tr><td>选择</td><td>部门号</td><td>部门名称</td><td>电话</td></tr>

<tr>

  <td><input name="selectValue" type="checkbox" value="1"></td>

  <td>123</td>

  <td><a href="getdepartment?id=123">办公室</a></td>

  <td>12345678</td>

</tr>

<tr>

  <td><input name="selectValue" type="checkbox" value="2"></td>

  <td>456</td>

  <td><a href="getdepartment?id=123">办公室2</a></td>

  <td>87654321</td>

</tr>

 </table>

 <input type="button" onclick="getSel()" value="getSeled" />

 <script>

 var list = {}, inps = document.getElementById('sel').getElementsByTagName('input');

for(var i= 0; i < inps.length; i++)

	inps[i].onclick = function(){

		if(!this.checked && list[this.value]){

			delete list[this.value];

			return; 

		}

	var par = this.parentNode.parentNode;

	list[this.value] = [getVal(par.cells[1].innerHTML), getVal(par.cells[2].innerHTML), getVal(par.cells[3].innerHTML)];

}



function getSel(){

	var arr = [];

	for(var pro in list)

	   arr.push(list[pro]);

	alert(arr.join('\n') || '没有选重');

}



function getVal(str){

	return str.replace(/<.+?>/g,'');

}

 </script>

</body>

</html>

zl_c 2008-09-10

打赏
举报

给你一个兼容IE和FF的innerText的函数：

function getInnerText(obj)

{//兼容FF

	return (obj.innerText ? obj.innerText : obj.textContent);	

}

berg369 2008-09-10

打赏
举报

有更好的建议吗？

berg369 2008-09-10

打赏
举报

innerHTML尽管都支持，但单元格内元素可能会有<span><font><a>等标签的装饰，并不一定是值本身，再解析取值似乎太繁琐了；

单元格变动的情况是可能会碰到不规则的单元格或者后期增加列的情况，曾经在editgrid（编辑多行数据同时保存）表格中，我们用过通过<td>索引取值的方式，后来改为基于name集合取属性，是因为美工改页面时会造成错误，因此对通过索引取值有点担心；

字符串方式是这样：



<tr><td>选择</td><td>部门号</td><td>部门名称</td><td>电话</td></tr>

<tr>

  <td><input name="selectValue" type="radio" value="123|办公室|12345678"></td>

  <td>123</td>

  <td><a href="getdepartment?id=123">办公室</a></td>

  <td>12345678</td>

</tr>

由于把值都赋给了单选钮，因此可以通过单选钮的value取值，如果用“|”或“，”分隔，难免内容中也有这个字符。
所以，由于内容有<a>标签，不能用innerHTML，因为要选一行中多个值回填主页面的多个域，把值放在value上就需要分隔符。因此我感觉比较困扰！

jackyBody 2008-09-10

打赏
举报

直接贴HTML代码出来还好。

剑心永远OK 2008-09-10

打赏
举报

直接贴HTML代码出来还好。

cgisir 2008-09-10

打赏
举报

1、找到选中行的tr,再定位第几个td，然后用innerText取值，首先，firefox不支持innerText,其次，定位td根据索引位置，这个位置可能会被改变；
innerHTML获取td值, IE、FF都支持，不知道你的td位置会改变是怎么回事。

2、表格同时把值赋给单选或复选钮的value，从单复选钮中获得，这种方式缺点是，如果要返回多个单元格的值（如返回部门、部门负责人、电话），只能在value中用分隔符分开，再字符串分拆取，似乎不是好办法（分隔符不好找，包不准内容中就有），IE可以增加自定义属性如value1放另外的值，但firefox不可以
请高手指点，怎么取最好呢？

既然能用分隔符，干嘛不用数组

var list = {};

input.onclick = function(){

   if(this.checked && list[this.value]){

    delete list[this.value];

    return; 

  }

   list[this.value] = [this.cells[1].innerHTML, this.cells[2].innerHTML];

}