js achieve editable form

Js implemented using a can change the value of any given cell, and can delete any cell:

FIG interface effect:

Principle Analysis:

To achieve any major repair of a cell needs to do three steps:

Obtaining the cell id.
```
var tb = document.getElementById("d");
```

Get input box row and column value value input box, and the value to an integer value.

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

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

3. Modify the value of the cell:

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

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

Mainly through the three steps can be realized, but in order to make the process more robust, increasing the judgment, determines whether the input is not the input numeric values and of whether the cross-border.

//如果需要修改的行不是整数，则弹出警告
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;
}

Thus a change to complete the cell contents and delete cells function.

Specific code as follows. (Delete function to achieve just the last sentence changed to modify the code to remove the code)

<!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 achieve editable form

Guess you like