js 操作表格-修改单元格内容

最新推荐文章于 2022-03-08 20:32:54 发布

神奇大叔

最新推荐文章于 2022-03-08 20:32:54 发布

阅读量6.3k

点赞数 1

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

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

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

表格的修改

	将修改内容变成框(input标签),将原内容按照字符串拼接放在value里
	失去焦点后，将框变成文本，并将文本内容变成框的value值
	为了避免连续点修改按钮，框内的值将变成input的源码，所以要加上判断单元格的内容是不是数字
	
		function update(){
			var cell=document.getElementById("cell");
			/*修改单元格内容*/
			//判断是否是数字，避免连续点击两次，单元格内容变成input标签源码
			if(!isNaN(cell.innerHTML))
			{cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' onblur='updateRow2(this)'>"; /*字符串的拼接*/
			}
			
		}
		/*失去焦点*/
		function updateRow2(inp){
			var cell=document.getElementById("cell");
			cell.innerHTML=inp.value;
		}

代码示例：

<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(){
				var cell=document.getElementById("cell");
				/*修改单元格内容*/
				//判断是否是数字，避免连续点击两次，单元格内容变成input标签源码
				if(!isNaN(cell.innerHTML))
				{cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' οnblur='updateRow2(this)'>"; /*字符串的拼接*/
				}
				
			}
			/*失去焦点*/
			function updateRow2(inp){
				var cell=document.getElementById("cell");
				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()"/>
					<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()" />
					<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()"/>
					<input type="button" name="" id="" value="删除" onclick="delRow(this)" />
				</td>
			</tr>
		</table>
	</body>
</html>

神奇大叔

关注

1
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
js 操作表格-修改单元格内容

表格的修改将修改内容变成框(input标签),将原内容按照字符串拼接放在value里失去焦点后，将框变成文本，并将文本内容变成框的value值为了避免连续点修改按钮，框内的值将变成input的源码，所以要加上判断单元格的内容是不是数字 function update(){ var cell=document.getElementById("cell"); /*修改...
复制链接

扫一扫