利用DOM在线编辑表格.html_dom在线转换表格-优快云博客

本文链接：https://blog.youkuaiyun.com/rjzou2006/article/details/1731487

本文介绍了一个使用纯JavaScript实现的HTML表格动态增删功能，包括自动添加、手动添加、删除及提交表格数据等操作。通过自定义事件处理和样式设置，提高了用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>WebForm1</title>

.showtalbe {}{}

.showtable font{}{ color:#000000; font-size:12px; font-family:"新宋体"}

.showtable tbody{}{ background-color:#CCCCCC; font-size:12px;text-align:left;word-break:break-all;}

.showtable thead{}{ background-color:#003399; height:20px;line-height:15px; color:#FFFFFF; font-size:12px; font-family:"新宋体";text-align:left;}

.showtable td{}{padding-left:8px;}

.inputNormal {}{ font-size:12px; font-family:'新宋体'; color: #000000; cursor:pointer; background-color:#cccccc; width:200px; text-align:left; border-color: #cccccc; border-style:solid; border-width:1px; height:30px; overflow-x:hidden; overflow-y:auto; }

</style>

//给string增加去首尾空白的方法

String.prototype.trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}

var startID = 1;

function $(objID)

{

return document.getElementById(objID);

}

//自动添加

function adddataauto()

{

var objTable =$("objTable");

var newID = startID++ ;

var newName = "name" + newID ;

addtr(newID,newName);

addoption(newID,newName);

}

//手工添加

function adddatamanual()

{

var newID = $("caseID").value;

var newName = $("caseName").value;

//检查数据格式是否正确

if(!checkregx(newID,newName))

return;

//检查ID是否存在

if(!findvalueinselect(newID,$("selectList")))

{

alert(newID + "已经存在");

return;

}

addtr(newID,newName);

addoption(newID,newName);

}

//表格中添加一行

function addtr(objID,objName)

{

//创建td节点

var td0= document.createElement("td");

var td1= document.createElement("td");

var td2= document.createElement("td");

var td3= document.createElement("td");

var deleteButton = document.createElement("input");

var checkBox = document.createElement("input");

var textArea = document.createElement("textarea");

//设置td样式

td0.setAttribute("width","26px");

td1.setAttribute("width","15px");

td2.setAttribute("width","73px");

td3.setAttribute("width","50px");

deleteButton.setAttribute("type","button");

deleteButton.setAttribute("id","deleteButton" + objID);

deleteButton.setAttribute("name","deleteBox"+ objID);

deleteButton.setAttribute("value","delete");

deleteButton.setAttribute("className","button");

deleteButton.setAttribute("class","button");//for ff

//设置deletebutton的事件

deleteButton.onclick = function(event)

{

if(event == null)

{

event = window.event; // For IE

}

var eventObj = event.srcElement? event.srcElement : event.target;

var tbodyNode = eventObj.parentNode.parentNode.parentNode;

var trNode = eventObj.parentNode.parentNode

var rowIndex = trNode.rowIndex;

var objTable = document.getElementById("objTable");

objTable.removeChild(tbodyNode);

deleteoptions(rowIndex-1);

}

//设置checkbox的样式

checkBox.setAttribute("type","checkbox");

checkBox.setAttribute("id","deleteBox");

checkBox.setAttribute("name","deleteBox");

checkBox.setAttribute("value",objID);

//设置checkbox的事件

checkBox.onclick = function(event)

{

if(event==null)

{

event = window.event;

}

var eventObj = event.srcElement? event.srcElement : event.target;

var checkBox = eventObj;

var trNode = checkBox.parentNode.parentNode

var textBoxNode = checkBox.parentNode.nextSibling.nextSibling.childNodes[0];

var checked =checkBox.checked;

if(checked)//被选中时的样式

{

trNode.style.backgroundColor="#8CC6FF";

textBoxNode.style.borderColor="#8CC6FF";

textBoxNode.style.backgroundColor="#8CC6FF";

}

else//取消选择时的样式

{

trNode.style.backgroundColor="#CCCCCC";

textBoxNode.style.backgroundColor="#CCCCCC";

textBoxNode.style.borderColor="#CCCCCC";

}

//设置textarea的样式

textArea.setAttribute("className","inputNormal");

textArea.setAttribute("class","inputNormal");//for ff

textArea.setAttribute("value",objName);

textArea.setAttribute("id","myText");

textArea.setAttribute("name","myText");

textArea.value = objName;//for ff

//设置textarea的事件

textArea.onfocus = function(event)

{

if(event==null)

{

event = window.event;

}

var obj = event.srcElement? event.srcElement : event.target;

obj.style.backgroundColor="#ffffff";

obj.style.height ="50px";

obj.style.cursor = "text";

obj.style.overflowY = "scroll";

obj.inFocus=true;

}

textArea.onmouseover= function(event)

{

if(event==null)

{

event = window.event;

}

var obj = event.srcElement? event.srcElement : event.target;

if(!obj.inFocus)

{

obj.style.borderColor="#FF0000";

obj.style.backgroundColor="#F0F8FF";

}

textArea.onmouseout= function(event)

{

if(event==null)

{

event = window.event;

}

var obj = event.srcElement? event.srcElement : event.target;

var checkBoxNode = obj.parentNode.previousSibling.previousSibling.firstChild;

if(obj.inFocus)//处于输入状态

return;

if(checkBoxNode.checked)//被选中

{

obj.style.borderColor = "#8CC6FF";

obj.style.backgroundColor="#8CC6FF";

return;

}

if(!obj.inFocus)

{

obj.style.borderColor = "#cccccc";

obj.style.backgroundColor="#cccccc";

}

textArea.onblur= function(event)

{

if(event==null)

{

event = window.event;

}

var obj = event.srcElement? event.srcElement : event.target;

var checkBoxNode = obj.parentNode.previousSibling.previousSibling.firstChild;

if(checkBoxNode.checked)

{

obj.style.borderColor = "#8CC6FF";

obj.style.backgroundColor="#8CC6FF";

}

else

{

obj.style.borderColor = "#cccccc";

obj.style.backgroundColor="#cccccc";

}

obj.style.height ="30px";

obj.style.overflowY = "auto";

obj.style.cursor = "pointer";

obj.inFocus=false;

}

td0.appendChild(checkBox);

td1.innerHTML = objID;

td2.appendChild(textArea);

td3.appendChild(deleteButton);

//创建tr节点

var trNode = document.createElement("tr");

trNode.appendChild(td0);

trNode.appendChild(td1);

trNode.appendChild(td2);

trNode.appendChild(td3);

//创建tbody节点，必须使用tbody，不然无法使用dom方式添家行，只能用insertRow

var trBody = document.createElement("tbody");

trBody.appendChild(trNode);

$("objTable").appendChild(trBody);

}

//下拉菜单中添加一项

function addoption(objID,objName)

{

var list1 = $("selectList");

var opNode = document.createElement("option");

opNode.text = objName;

opNode.value =objID;

//必须用add而不能用appendchild，用appendchid文本值显示不出来？？

list1.options.add(opNode);

}

//查找select中的value

function findvalueinselect(p_objValue,p_objList)

{

for(i=0;i<p_objList.options.length;i++)

{

if(p_objList.options[i].value ==p_objValue)

return false;

}

return true;

}

//删除选中的行

function deleterows()

{

var objTable =$("objTable");

var boxList = document.getElementsByName("deleteBox");

var idArray = new Array();

for(i=0;i<boxList.length;i++)

{

if(boxList[i].checked ==true)

idArray.push(i);

}

var rowIndex;

var nextDiff =0;

//面试的时候没考虑到rowindex变化，连续删除出错

for(j=0;j< idArray.length;j++)

{

rowIndex = idArray[j]+1-nextDiff++

objTable.deleteRow(rowIndex);

deleteoptions(rowIndex-1);

}

//删除下拉菜单对应的项

function deleteoptions(itemIndex)

{

var list = $("selectList");

list.remove(itemIndex);

}

//提交数据到服务器

function checksubmit()

{

var postString = $("postString");

var boxList = document.getElementsByName("deleteBox");

var textList = document.getElementsByName("myText");

var idArray = new Array();

for(i=0;i<boxList.length;i++)

{

idArray.push(boxList[i].value + "|" + textList[i].value);

}

postString.value = idArray.join("-");

alert(postString.value);

}

//正则式验证输入格式

function checkregx(p_idCase,p_nameCase)

{

var regID=new RegExp("^[1-9]/d*$");

var idValue = p_idCase.trim();

var flag = true;

var regName=new RegExp("^[a-zA-Z_][0-9a-zA-Z-_.]*$");

var nameValue = p_nameCase.trim();;

var noticeText="";

if(regID.test(idValue)==false)

{

noticeText +="id必须为数字，并且大于0 ";

flag = false;

}

if(!regName.test(nameValue))

{

noticeText +="name格式不合法";

flag = false;

}

if(!flag)

{

alert(noticeText);

return false;

}

return true;

}

//应用自定义的css样式

function setcss()

{

var inputList = document.getElementsByTagName("input");

for(i= 0;i<inputList.length;i++)

{

//验证页面上的文本框

if( inputList[i].type == "button" ||

inputList[i].type == "submit" ||

inputList[i].type == "reset"

)

{

inputList[i].className="button";

}

//全选或者全不选

function selectall()

{

//ff中去name属性 ie中取id属性

var objList = document.getElementsByName("deleteBox");

for(i=0;i<objList.length;i++)

{

var checked =objList[i].checked;

objList[i].checked=checked?false:true;

var trNode = objList[i].parentNode.parentNode;

var textBoxNode = objList[i].parentNode.nextSibling.nextSibling.childNodes[0]

if(!checked)//没被选中

{

trNode.style.backgroundColor = "#8CC6FF";

textBoxNode.style.borderColor="#8CC6FF";

textBoxNode.style.backgroundColor="#8CC6FF";

}

else

{

trNode.style.backgroundColor = "#CCCCCC";

textBoxNode.style.backgroundColor="#CCCCCC";

textBoxNode.style.borderColor="#CCCCCC";

}

</script>

</HEAD>

<div>

<thead>

<tr>

<td width="73">delete</td>

</tr>

</thead>

</table>

<table>

<tr>

<td>

</select>

</td>

</tr>

</table>

</div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</HTML>