工作流的设置,(表格操作)

最新推荐文章于 2024-09-26 13:14:27 发布

原创最新推荐文章于 2024-09-26 13:14:27 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#工作 #function #input #button #border #javascript

-3- javascript 专栏收录该内容

9 篇文章

订阅专栏

该博客主要展示了一段JavaScript代码，实现了步骤列表的添加、修改、删除、移动和保存等功能。通过定义多个函数，如InsertTR、EditTR等，结合HTML表单和表格元素，实现了用户与列表的交互操作，方便对步骤信息进行管理。

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

<HTML><HEAD><TITLE>无标题文档</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"><META HTTP-EQUIV="imagetoolbar" CONTENT="no"><META NAME="Author" CONTENT="野猪*钦枫.制作">

<STYLE TYPE="text/css"></STYLE>

<script language="javascript" type="text/JavaScript">

var i=1;

var mole=false;

var EditObj=null;

var oClickTR;

    function InsertTR(strObjName, strUserName){

        if(!strObjName || !strUserName)return;

        var obj=document.getElementById('SWlist');

        var TR=obj.insertRow();

        var TD1 = TR.insertCell(), TD2 = TR.insertCell(), TD3 = TR.insertCell(), TD4 = TR.insertCell(), TD5 = TR.insertCell(), TD6 = TR.insertCell();

        TR.align='center';

        TR.id='ListTR';

        TR.bgColor="#eeeeee";

        TD1.innerText=i;

        TD2.innerText=strObjName;

        TD3.innerText=strUserName;

        TD4.innerHTML='<a href=/"#/" onclick=/"EditTR(this);/">修</a>';

        TD5.innerHTML="<a href=/"#/" onclick=/"DelTR();/">删</a>";

        TD6.innerHTML='<a href=/"#/" onclick=/"MoveTR();/">上移</a>  <a href=/"#/" onclick=/"MoveTR();/">下移</a>';

        form1.t1.value='';

        form1.t2.value='';

        form1.t1.focus();

        i++;

    };

    function EditTR(o){

        form1.t1.value=event.srcElement.parentElement.parentElement.children[1].innerText;

        form1.t2.value=event.srcElement.parentElement.parentElement.children[2].innerText;

        EditObj=o;

        mole=true;

    };

    function EditSave(strObjName, strUserName){

        if(!strObjName || !strUserName)return;

        var obj=EditObj.parentElement.parentElement;

        var TD2=obj.children[1];

        var TD3=obj.children[2];

        TD2.innerText=strObjName;

        TD3.innerText=strUserName;

        form1.t1.value='';

        form1.t2.value='';

        form1.t1.focus();

        mole=false;

        EditObj=null;

    };

    function DelTR(){

        var CZobj=document.getElementById('SWlist');

        var obj=event.srcElement;

        CZobj.deleteRow(obj.parentElement.rowIndex);

        for(var i=0; i<ListTR.length; i++)

            ListTR[i].children[0].innerText=i+1;

    };

    function MoveTR(){

        var CZobj=document.getElementById('SWlist');

        var TrIndex=event.srcElement.parentElement.parentElement.rowIndex - 2;

        if(event.srcElement.innerText=='上移' && TrIndex > 0){

            CZobj.moveRow(TrIndex, TrIndex-1);

            for(var i=0; i<ListTR.length; i++)

                ListTR[i].children[0].innerText=i+1;

        }

        else if(event.srcElement.innerText=="下移" && TrIndex < ListTR.length-1){

            CZobj.moveRow(TrIndex, TrIndex+1);

            for(var i=0; i<ListTR.length; i++)

                ListTR[i].children[0].innerText=i+1;

        }else{

            return;

        }

    };

    function ClickTR(){

        if(oClickTR != null && oClickTR.tagName == "TR")oClickTR.bgColor="#eeeeee";

        oClickTR = event.srcElement.parentElement;

        if(oClickTR.tagName == "TR")oClickTR.bgColor=(oClickTR.bgColor=="#eeeeee")?"#ffffff":"#eeeeee";

    };

    function Save(){

        var hdINPUT='';

        if(typeof(ListTR)=='undefined'){alert("ÇëÌí¼ÓÏî!");return;}

        if(typeof(ListTR.length)=='undefined'){

            var strObjName=ListTR.children[1].innerText;

            var strUserName=ListTR.children[2].innerText;

            hdINPUT+="<input type=/"text/" name=/"strObjName[]/" value=/""+strObjName+"/"><input type=/"hidden/" name=/"strUserName[]/" value=/""+strUserName+"/">";

        }else{

            for(var i=0; i<ListTR.length; i++){

                var strObjName=ListTR[i].children[1].innerText;

                var strUserName=ListTR[i].children[2].innerText;

                hdINPUT+="<input type=/"text/" name=/"strObjName[]/" value=/""+strObjName+"/"><input type=/"hidden/" name=/"strUserName[]/" value=/""+strUserName+"/">";

            }

        }

        form1.insertAdjacentHTML("afterBegin", hdINPUT);

        form1.submit();

        form1.b2.disabled=true;

    };

</script>

</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">

<div style="border:1px #7d7d7d solid;">

<form name="form1" method="post" action="test.php">

    步骤名称<input type="text" name="t1" /><br />

    执行人<input type="text" name="t2" /><br />

    <input type="button" value="添加" name="b1" onclick="(!mole)?InsertTR(t1.value, t2.value):EditSave(t1.value, t2.value)" />

    <input type="button" value="保存" name="b2" onclick="Save();" />

</form>

</div>

<table width="645" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCC" style="border-collapse:collapse;">

  <tr>

    <td colspan="6" align="center">步骤列表</td>

  </tr>

  <tr align="center" bgcolor="#99CCFF">

    <td width="57">序号</td>

    <td width="190">步骤名称</td>

    <td width="124">执行人</td>

    <td width="84">修改</td>

    <td width="84">删除</td>

    <td width="92">调整</td>

  </tr>

<Tbody id="SWlist" onclick="ClickTR();"></Tbody>

</table>

</BODY>

</HTML>