js 取表格table <td>值 <botton> <a>

最新推荐文章于 2024-11-08 11:26:40 发布

原创最新推荐文章于 2024-11-08 11:26:40 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

XHTML-DIV-CSS 同时被 2 个专栏收录

6 篇文章

订阅专栏

1 篇文章

订阅专栏

JS取表格<td>中的值

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8"/>
<style>
table{
	text-align: center;
}
td{
	width: 100px;
	height: 30px;
}
</style>
</head>
<body>
	<table id="tab" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">
		<tr>
			<td>序号</td>
			<td>图书代码</td>
			<td>操作</td>
		</tr>

		<tr>
			<td>1</td>
			<td>1001</td>
			<td><button id="but" onclick="showTab('1')">详情</button></td>
		</tr>

		<tr>
			<td>2</td>
			<td>1002</td>
			<td><button id="but" onclick="showTab('2')">详情</button></td>
		</tr>

		<tr>
			<td>3</td>
			<td>1003</td>
			<td><button id="but" onclick="showTab('3')">详情</button></td>
		</tr>
		</table>

	<script>
		function showTab(id)
		{
			var tab=document.getElementById("tab");
			alert(tab.rows[id].cells[1].innerHTML);
		}
	</script>


<br/>
	<table id="tab1" border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">
		<tr><td>序号</td><td>图书代码</td><td>操作</td></tr>

		<tr>
			<td>1</td>
			<td>1001</td>
			<td><a href = "javascript:;" onclick ="add('1001');">详情</a></td>
		</tr>

		<tr>
			<td>2</td>
			<td>1002</td>
			<td><a href = "javascript:;" onclick ="add('1001');">详情</a></td>
		</tr>

		<tr>
			<td>3</td>
			<td>1003</td>
			<td><a href = "javascript:;" onclick ="add('1001');">详情</a></td>
		</tr>
	</table>
	<script>
	function add(id)
	{
		var tab=document.getElementById("tab1");
		alert(tab.rows[id-1000].cells[1].innerHTML);
	}
	</script>




</body>
</html>

结果如下