软件开发培训班 >> 编程开发 >> JavaScript

Js获取table当前tr行的值的代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>Js获取 table当前行的值</title> 
<script language=javascript> 
var selectedTr=null; 
function c1(obj){ 
obj.style.backgroundColor=blue; //把点到的那一行变希望的颜色; 
if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor"); 
if(selectedTr==obj) selectedTr=null;//加上此句，以控制点击变白，再点击反灰 
else selectedTr=obj; 
} 
/*得到选中行的第一列的值*/ 
function check(){ 
if(selectedTr!=null){ 
var str=selectedTr.cells[0].childNodes[0].value; 
document.getElementById("lab").innerHTML=str; 
} 
else{ 
alert("请选择一行"); 
} 
} 
/*删除选中行*/ 
function del(){ 
if(selectedTr!=null){ 
if(confirm("确定要删除吗?")){ 
alert(selectedTr.cells[0].childNodes[0].value); 
var tbody=selectedTr.parentNode; 
tbody.removeChild(selectedTr); 
} 
} 
else{ 
alert("请选择一行"); 
} 
} 
</script> 
</head> 
<body> 
单击选中Tr，高亮显示，再单击取消选选中 。<input type=button value="选中的是哪一行？" onclick="check()"> <input 
type=button value="删除选中行" onclick="del()"> <input type=button value="增加一行" onclick="add()"> 
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab"> 
<tr onclick="c1(this);" bgcolor="#cccccc"> 
<td ><input type="text" value="11">　</td> <td><input type="text" value="12"></td> 
</tr> 
<tr onclick="c1(this);" bgcolor="#e0e0e0"> 
<td ><input type="text" value="21">　</td> <td><input type="text" value="22"></td> 
</tr> 
<tr onclick="c1(this);" bgcolor="#cccccc"> 
<td ><input type="text" value="31">　</td> <td><input type="text" value="32"></td> 
</tr> 
<tr onclick="c1(this);" bgcolor="#e0e0e0"> 
<td ><input type="text" value="41">　</td> <td><input type="text" value="42"></td> 
</tr> 
<tr onclick="c1(this);" bgcolor="#cccccc"> 
<td ><input type="text" value="51">　</td> <td ><input type="text" value="52">　</td> 
</tr> 
</table> 
<label id="lab"></label> 
</body> 
</html>

技术文章快速查找

jquery 问答知识整理

基于jQuery的投票系统显示结果插件

JQuery实现自定义对话框的代码

Uglifyjs(JS代码优化工具)入门安装使用

javascript 获取select下拉列表值的代码

Prototype源码浅析 String部分(四)之补充

extjs之去除s.gif的影响

javascript 动态添加表格行

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建