以DOM方式在线编辑表格

来源：互联网发布：java 解析word文档结构编辑：程序博客网时间：2024/04/26 14:53

几天终于有个大概的样子了，比当时的要复杂些，模仿了pj blog的一些功能，哪位想去atop面试的话就来对地方了。。

知识点在于：
1 dom操作，创建，增加，删除html元素
2 js改变html元素style属性
3 fierfox和ie的css处理的异同，例如class，className，！important等
4基本的js语法，查找元素，遍历表单元素集合
因为pj blog不方便显示代码，详细代码见：http://www.cnblogs.com/dalink/articles/481657.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>WebForm1</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
        <style type="text/css"> .button {}{ background-color: #003399; border-bottom-style:solid; color:#FFFFFF;font-size:12px; border-color:#000000; border-style:solid;cursor:pointer;border-width:thin; border-width:1px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px; }
    .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>
        <script>

//给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/n";
            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>
    <body onload="setcss();">
        <form id="Form1" method="post" runat="server" onsubmit="return checksubmit();">
            <input type="hidden" id="postString">
            <div>
                <table id="objTable" class="showtable">
                    <thead>
                        <tr>
                            <td width="26"><input type="checkbox" id="selectAll" onclick="selectall();"></td>
                            <td width="15">id</td>
                            <td width="210">name</td>
                            <td width="73">delete</td>
                        </tr>
                    </thead>
                </table>
                <table>
                    <tr>
                        <td>
                            <select id="selectList">
                                <option title="" value="0" selected>所有项目</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <input type="button" value="add new row" onclick="adddataauto();"> <input type="button" value="delete rows" onclick="deleterows()">
                <input type="submit" value="submit">
            </div>
            <table>
                <tr>
                    <td style="HEIGHT: 21px">id 大于1</td>
                    <td style="HEIGHT: 25px">name 数字，字母，-_.</td>
                </tr>
                <tr>
                    <td><input type="text" id="caseID"></td>
                    <td><input type="text" id="caseName"></td>
                </tr>
                <tr>
                    <td><input type="reset" value=" reset "></td>
                    <td><input type="button" value="manual new" onclick="adddatamanual();"></td>
                </tr>
            </table>
        </form>
    </body>
</HTML>