edittr.html

来自「该JavaScript可以动态的编辑TABLE中的某一行。类似.Net中的Tab」· HTML 代码 · 共 77 行

HTML
77 行
字号 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
function Trim(x){
	    while((x.length>0) && (x.charAt(0)==' '))
	        x = x.substring(1 , x.length);
	    while((x.length>0) && (x.charAt(x.length-1)==' '))
	        x = x.substring(0, x.length-1);
	    return x;
}
function EditTd(rowNumber){
	obj = document.getElementById("baseTable");
	var curRow = obj.rows[rowNumber];
	for (i=1; i<4; i++){
		var cellText = curRow.cells[i].innerHTML;
		curRow.cells[i].innerHTML = "<input type='text' value='" + cellText + "'>"
									+ "<input type='hidden' value='" + cellText + "'>";
	}
	curRow.cells[4].innerHTML = "<a href='JavaScript:EditCancel(" + rowNumber + ")'>Cancel</a>&nbsp"
								+ "<a href='JavaScript:EditEnd(" + rowNumber + ")'>Update</a>";
}

function EditCancel(rowNumber){
	obj = document.getElementById("baseTable");
	var curRow = obj.rows[rowNumber];
	for (i=1; i<4; i++){
		var inputValue = curRow.cells[i].lastChild.value;
		curRow.cells[i].innerHTML = inputValue;
	}
	curRow.cells[4].innerHTML = "<a href='JavaScript:EditTd(" + rowNumber + ")'>Edit</a>";
}

function EditEnd(rowNumber){
	obj = document.getElementById("baseTable");
	var curRow = obj.rows[rowNumber];
	for (i=1; i<4; i++){
		var inputValue = curRow.cells[i].firstChild.value;
		curRow.cells[i].innerHTML = inputValue;
	}
	curRow.cells[4].innerHTML = "<a href='JavaScript:EditTd(" + rowNumber + ")'>Edit</a>";
	
}

</script>
</HEAD>

<BODY>
<table id="baseTable" width="100%" border="1">
  <TBODY>
  <tr >
    <td ><div align="right"></div></td>
    <td >Monday</td>
    <td >Tuesday</td>
    <td >Wednesday</td>
	<td >Operate</td>
  </tr>
  <tr >
    <td ><div align="right">12:00AM</div></td>
    <td id='Mon0' >111</td>
    <td id='Tue0' >222</td>
    <td id='Wed0' >333</td>
	<td ><a href="JavaScript:EditTd(1);">Edit</a></td>
  </tr>
  <tr id="kkk">
    <td ><div align="right">12:00AM</div></td>
    <td id='Mon0' >444</td>
    <td id='Tue0' >555</td>
    <td id='Wed0' >666</td>
	<td ><a href="JavaScript:EditTd(2);">Edit</a></td>
  </tr>
  </TBODY>
</table>
</BODY>
</HTML>

edittr.html - 源码说明

本页面展示了「该JavaScript可以动态的编辑TABLE中的某一行。类似.Net中的TableGrid控件的编辑功能。」中的 edittr.html 源码文件，采用 HTML 编程语言编写，共 77 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫开发者社区收录了大量与JavaScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?