可编辑的TD
来源：互联网 发布：闪电抢购软件使用方法 编辑：程序博客网 时间：2024/05/01 12:23
<!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) {// 获取要编辑的文本值。TDvar ageField = obj.parentNode.previousSibling; if (obj.checked){ageField.innerHTML = "<input type='text' name='age' onblur='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" onclick="enableEdit(this);"></TD></TR></TABLE></BODY></HTML>
