⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 edittr.html

📁 该JavaScript可以动态的编辑TABLE中的某一行。类似.Net中的TableGrid控件的编辑功能。
💻 HTML
字号:
<!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>

⌨️ 快捷键说明

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