js 实现可编辑的表格

利用 js 实现一个可以改变任意指定的单元格的值，并可以删除任意一个单元格：

效果界面如图：

原理分析：

实现对任意一个单元格的修主要需要做到三步：

获取单元格的id 。
```
var tb = document.getElementById("d");
```

获取行输入框和列输入框的 value 值，并将 value 值转换成整数。

var row = document.getElementById("row").value;
//强制转换一个 把字符串转换成 整数类型。
 row = parseInt(row);

var cel = document.getElementById("cel").value;
cel = parseInt(cel);

3.修改单元格的值：

//修改单元格的值
tb.rows.item(row -1).cells.item(cel -1).innerHTML
                     = document.getElementById("celVal").value;

//删除单元格的值
tb.rows[row -1].deleteCell(cel -1);

主要通过这三个步骤即可实现，但是为了使程序更健壮，增加了判断，判断输入的是不是数字以及输入的值是否越界。

//如果需要修改的行不是整数，则弹出警告
if(isNaN(row)){
	alert("您要修改的行必须是整数");
	return false;
}

//如果需要修改的列不是整数，则弹出警告
if(isNaN(cel)){
	alert("您要修改的列必须是整数");
	return false;
}

//需要修改的 行数 或者 列数，则 弹出警告
(row > tb.rows.length || cel > tb.rows.item(0).cells.length){
	alert("要修改的单元格不在该表格内");
	return false;
}

如此一来即可完成一个改变单元格内容和删除单元格的功能。

具体代码如下。（删除功能的实现只需把最后一句的修改代码换为删除代码即可）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js 制作可编辑的表格</title>
	</head>
	<body>
		
		改变第 <input type="text" name="row" id="row"  size="2"/> 行，
		第 <input type="text" name="cel" id="cel"  size="2"/>列的值为：
		
		<input type="text" name="celVal" id="celVal"  size="16"/></br>
		
		<input type="button" name="chg" id="chg" value="改变" onclick="change();"/>
		
		<table border="1" cellspacing="0" cellpadding="0" id="d" style="width:580px;border-collapse: collapse;">
			<tr>
				<td>Header</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Header3333</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Header4444</td>
				<td>Data</td>
			</tr>

		</table>
		
		<script type="text/javascript">
			
			var change =function(){
				var tb = document.getElementById("d");
				var row = document.getElementById("row").value;
				//强制转换一个 把字符串转换成 整数类型。
				row = parseInt(row);
				//如果需要修改的行不是整数，则弹出警告
				if(isNaN(row)){
					alert("您要修改的行必须是整数");
					return false;
				}
				
				var cel = document.getElementById("cel").value;
				cel = parseInt(cel);
				//如果需要修改的列不是整数，则弹出警告
				if(isNaN(cel)){
					alert("您要修改的列必须是整数");
					return false;
				}
				//需要修改的 行数 或者 列数，则 弹出警告
				if(row > tb.rows.length || cel > tb.rows.item(0).cells.length){
					alert("要修改的单元格不在该表格内");
					return false;
				}
				
				//修改单元格的值
			    tb.rows.item(row -1).cells.item(cel -1).innerHTML
			    	= document.getElementById("celVal").value;

			}
		</script>
	</body>
</html>

js 实现可编辑的表格

猜你喜欢