可编辑的TD

最新推荐文章于 2024-05-13 08:14:10 发布

luckystar2008

最新推荐文章于 2024-05-13 08:14:10 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/qincidong/article/details/8909107

版权

Front End 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
	<SCRIPT LANGUAGE="JavaScript">
	<!--
		/**
		* 单击复选框，当复选框选中时在原来显示文本值的地方用一个input替换，input的值是文本值。
		* 当取消选中时，去掉Input，并显示INPUT的Value值。
		*/
		function enableEdit(obj) {
			// 获取要编辑的文本值。TD
			var ageField = obj.parentNode.previousSibling;
 
			if (obj.checked)
			{
				ageField.innerHTML = "<input  type='text' name='age' οnblur='checkNumInput(this);' value='"+ageField.innerText+"'>";
			}
			else {
				var age = ageField.childNodes[0].getAttribute("value");
				ageField.removeChild(ageField.childNodes[0]);
				ageField.innerText = age;
			}
 
		}
 
		function checkNumInput(num) {
			var regex = /^[-]?\\d+(\\.\\d{2})?$/;
			var t = document.getElementsByTagName('span')[0] || document.createElement('span');
			if (!regex.test(num.value))
			{
				//alert("输入有误，请输入合法的数值。保留2位小数，例：123.45");
				t.innerText = '输入有误，请输入合法的数值。保留2位小数，例：123.45';
				document.body.appendChild(t);
				//num.focus();
				return;
			}
			else {
				document.body.removeChild(t);
			}
		}
	//-->
	</SCRIPT>
 
	<style type='text/css'>
		TD {
			width:25%;
		}
 
		TABLE {
			border:1px dotted blue;
		}
	</style>
</HEAD>
 
<BODY>
	<TABLE width=500>
	<TR>
		<TD>NO.</TD>
		<TD>姓名</TD>
		<TD>性别</TD>
		<TD>年龄</TD>
	</TR>
	<TR>
		<TD>1</TD>
		<TD>张三</TD>
		<TD>男</TD>
		<TD>23</TD>
		<TD><input type="checkbox" οnclick="enableEdit(this);"></TD>
	</TR>
	</TABLE>
</BODY>
</HTML>

luckystar2008

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
可编辑的TD

New Document <!-- /** * 单击复选框，当复选框选中时在原来显示文本值的地方用一个input替换，input的值是文本值。 * 当取消选中时，去掉Input，并显示INPUT的Value值。 */ function enableEdit(obj) { // 获取要编辑的文本值。TD var ageFiel
复制链接

扫一扫