js动态生成控件（增删改）

最新推荐文章于 2021-06-09 18:13:42 发布

cypakoo

最新推荐文章于 2021-06-09 18:13:42 发布

阅读量727

点赞数

分类专栏： js特效功能文章标签： button function border class input table

本文链接：https://blog.csdn.net/cypakoo/article/details/7193975

版权

js特效功能专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript动态创建HTML控件，如按钮、输入框等，并展示了增删改功能的实现，通过实例代码帮助理解。

摘要由CSDN通过智能技术生成

运行效果：

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <title></title>
    <style>
        #tab
        {
            border: 1px solid #aaa;
            border-collapse: collapse;
            width: 80%;
        }
        #tab th
        {
            border: 1px solid #aaaaaa;
            background: #ECE9D8;
            border-collapse: collapse;
            padding: 5px;
            text-align: left;
        }
        #tab td
        {
            border: 1px solid #d8d8d8;
            border-collapse: collapse;
            padding: 5px;
        }
        .txt
        {
            border: 1px solid #888;
            background: #ECE9D8;
        }
        .checkBg
        {
            border: 1px solid #aaaaaa;
            background: #ECE9D8;
        }
        .checkTxt
        {
            border: 1px solid #aaa;
            background: ##d8d8d8;
        }
        .button
        {
            border: 1px solid #888;
            margin: 5px 0px;
            width: 80px;
            background: #ECE9D8;
            height: 22px;
            line-height: 22px;
        }
    </style>

    <script language="javascript" type="text/javascript">
     function $(id) {return document.getElementById(id);}
     function $F(name){return document.getElementsByTagName(name);}

     function add(){
        var otr = document.getElementById("tab").insertRow(-1);
        var checkTd=document.createElement("td");
        checkTd.innerHTML = '<input type="checkbox" class="check" οnclick="ccolor()" name="checkItem">';
        var otd1 = document.createElement("td");
        otd1.innerHTML = '<span>1</span>';
        var otd2 = document.createElement("td");
        otd2.innerHTML = '<span>2</span>';

        otr.appendChild(checkTd);
        otr.appendChild(otd1);
        otr.appendChild(otd2);
     }
     function ccolor()
     {
            var c1 = document.getElementsByName('checkItem');
            for(var i=0; i<c1.length; i++)
            if(c1[i].checked)
            {
                c1[i].parentNode.parentNode.className="checkBg";
                c1[i].parentNode.nextSibling.firstChild.className="checkTxt";
                c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";
            }
            else     {    c1[i].parentNode.parentNode.className="";
            c1[i].parentNode.nextSibling.firstChild.className="";
                c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
     }
     function del(){
        var c = document.getElementsByName('checkItem');
        var idArray = new Array();
        for(var i=0; i<c.length; i++)
        if(c[i].checked)
        idArray.push(i);
         var rowIndex;
         var nextDiff =0;
         for(j=0;j< idArray.length;j++)
        {
          rowIndex = idArray[j]+1-nextDiff++;
          alert(rowIndex);
          document.getElementById("tab").deleteRow(rowIndex);
        }
      }
    function edit(){
        var c = document.getElementsByName('checkItem');
        var idArray = new Array();
        for(var k=0; k<c.length; k++)
        if(c[k].checked)
        idArray.push(k);
         var rowIndex;
         var nextDiff =0;
         for(j=0;j< idArray.length;j++)
        {
          rowIndex = idArray[j]+1;
          document.getElementById("tab").rows(rowIndex).cells(1).innerHTML='<input type="text" class="txt" id="infoName_txt'+rowIndex+'" maxlength="30" value=""/>';
          document.getElementById("tab").rows(rowIndex).cells(2).innerHTML='<input type="text" class="txt" id="infoValue_txt'+rowIndex+'" maxlength="30" value=""/>';
        }
        document.getElementById("edit").style.display="none";
        document.getElementById("update").style.display="block";
    }
    function update(){
        var c = document.getElementsByName('checkItem');
        var idArray = new Array();
        for(var k=0; k<c.length; k++)
        if(c[k].checked)
        idArray.push(k);
         var rowIndex;
         var nextDiff =0;
         for(j=0;j< idArray.length;j++)
        {
          rowIndex = idArray[j]+1;
          var str1=document.getElementById("infoName_txt"+rowIndex).value;
          var str2=document.getElementById("infoValue_txt"+rowIndex).value;
          document.getElementById("tab").rows(rowIndex).cells(1).innerHTML='<span>'+str1+'</span>';
          document.getElementById("tab").rows(rowIndex).cells(2).innerHTML='<span>'+str2+'</span>';
        }
        document.getElementById("update").style.display="none";
        document.getElementById("edit").style.display="block";
    }

      function alldell()
      {
         var des =document.getElementsByName('checkItem');
         for(var i=0;i<des.length;i++)
         {
            if(des[i].checked=document.getElementById('delall').checked){
            des[i].parentNode.parentNode.className="checkBg";
            des[i].parentNode.nextSibling.firstChild.className="checkTxt";
            des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";}
            else{ des[i].parentNode.parentNode.className="";
                des[i].parentNode.nextSibling.firstChild.className="";
                des[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
         }
      }
    </script>

</head>
<body>
    <table id="Table1">
        <tr>
            <td><input name="addv_btn" id="addv_btn" type="button" class="button" οnclick="add();" value="add" /></td>
            <td><input name="del_btn" id="del_btn" type="button" class="button" οnclick="del();" value="del" /></td>
            <td><input name="edit" id="edit" type="button" class="button" οnclick="edit();" value="edit" /></td>
            <td><input name="update" id="update" type="button" class="button" style="display: none" οnclick="update();" value="update" /></td>
        </tr>
    </table>
    <br>
    <table id="tab">
        <tr>
            <th width="5%"><input type="checkbox" id="delall" οnclick="alldell()"></td>
            <th width="40%">Name</td>
            <th width="55%">value</td>
        </tr>
    </table>
</body>
</html>