js 操作表格-单元格和行

最新推荐文章于 2023-08-28 18:11:51 发布

神奇大叔

最新推荐文章于 2023-08-28 18:11:51 发布

阅读量379

点赞数

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/102981682

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

表格的修改

	获取行对象,每个行中的单元格都有索引
		var tr=btn.parentNode.parentNode;
	获取单元格数组,操作索引来操作单元格
		行对象.cells[3]

代码示例:

<html>
	<head>
		<title>js 操作表格</title>
		<meta charset="utf-8"/>
		<script type="text/javascript">
			function delRow(btn)
			{
				var ta=document.getElementById("ta");
				var tr=btn.parentNode.parentNode;
				ta.deleteRow(tr.rowIndex);
			}
			
			/*修改*/
			function update(btn){
				//获取行对象
				var tr=btn.parentNode.parentNode;
				var cell=tr.cells[3];
				/*修改单元格内容*/
				//判断是否是数字，避免连续点击两次，单元格内容变成input标签源码
				if(!isNaN(Number(cell.innerHTML)))
				{cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' οnblur='updateRow2(this)'/>"; /*字符串的拼接*/
				
				}
				
				
			}
			/*失去焦点*/
			function updateRow2(inp){
				var cell=inp.parentNode;	
				cell.innerHTML=inp.value;
			}
		</script>
		<style type="text/css">
			#ta{
				margin:auto;
			}
			
			#ta tr{
				height:35px;

			}
			
			
		</style>
	</head>
	<body>
		<hr />
		<table border="1px" id="ta">
			<tr style="text-align: center; font-weight: bold;">
				<td width="200px">书名</td>
				<td width="100px">作者</td>
				<td width="100px">价格</td>
				<td width="100px">购买数量</td>
				<td width="200px">操作</td>
			</tr>
			<tr  id="t1">
				<td>java</td>
				<td>我</td>
				<td>40.0</td>
				<td id="cell">3</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" onclick="update(this)"/>
					<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
				</td>
			</tr>
			<tr >
				<td>js</td>
				<td>gg</td>
				<td>77.60</td>
				<td>2</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量"onclick="update(this)" />
					<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
				</td>
			</tr>
			<tr>
				<td>Spring入门</td>
				<td>mm</td>
				<td>78.88</td>
				<td>300</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" onclick="update(this)"/>
					<input type="button" name="" id="" value="删除" onclick="delRow(this)" />
				</td>
			</tr>
		</table>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 操作表格-单元格和行

表格的修改获取行对象,每个行中的单元格都有索引 var tr=btn.parentNode.parentNode; 获取单元格数组,操作索引来操作单元格行对象.cells[3]代码示例:<html> <head> <title>js 操作表格</title> <meta charset="utf-8"/>...
复制链接

扫一扫

专栏目录