zoukankan      html  css  js  c++  java
  • JS控制TABLE表格在任意一行下面添加一行(有待完善)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title></title>

    <script language="javascript">
    //动态添加删除table行
    var rowIndex = 0;
    aaa=function(id){return (typeof(id)=='object')?id:document.getElementById(id);}
    function add() {
    var row=aaa("tb").insertRow(aaa("tb").rows.length);
    col0 = row.insertCell(0);
    col1 = row.insertCell(1);
    col2 = row.insertCell(2);

    col0.width="300px"; //控制TD样式




    //向TD插入内容
    col0.innerHTML ="<tr name='btn' index=""+ rowIndex +"">" +
    "<input id='work1"+rowIndex+"' value='"+rowIndex+"' name='work1"+rowIndex+"' type='text' class='work1'/>";
    col1.innerHTML ="<input type='button' value='添加' onclick="return AddRow('row" + rowIndex +"')">";
    col2.innerHTML ="<input type='button' value='删除' onclick="return DeleteRow('row" + rowIndex +"')"></tr>";
    row.setAttribute("id", "row" + rowIndex);
    row.setAttribute("name", "row" + rowIndex);
    rowIndex++;
    }
    function DeleteRow(rowTag){ //删除
    var i = aaa("tb").rows[rowTag].rowIndex;
    //alert(i);
    //alert(rowIndex);
    var j;
    //for(j=i;j<=rowIndex;j++) {
    //$("tb").rows[j].index--;
    //}
    aaa("tb").deleteRow(i);
    rowIndex--;
    }
    function getRow(){

    }
    function AddRow(rowTag){ //删除
    var i = aaa("tb").rows[rowTag].rowIndex;
    //alert(rowIndex);
    for(var j=rowIndex; j>i+1; j--){
    var p=j-1;
    var nnn="work1"+j;
    var mmm="row"+j;
    document.getElementById('work1'+p).id=nnn;
    //row.setAttribute("id", "row" + y);

    }

    var x=i+1;
    alert(x);
    var row=aaa("tb").insertRow(i+1);
    col0 = row.insertCell(0);
    col1 = row.insertCell(1);
    col2 = row.insertCell(2);

    col0.width="300px"; //控制TD样式

    //向TD插入内容
    col0.innerHTML ="<tr name='btn' index=""+ x +"">" +
    "<input id='work1"+x+"' value='"+x+"' name='work1' type='text' class='work1'/>";
    col1.innerHTML ="<input type='button' value='添加' onclick="return AddRow('row" + x +"')">";
    col2.innerHTML ="<input type='button' value='删除' onclick="return DeleteRow('row" + x +"')"></tr>";
    row.setAttribute("id", "row" + x);
    row.setAttribute("name", "row" + x);
    rowIndex++;
    }

    var TrArray1 = new Array();
    var TrArray2 = new Array();
    function getDongtai(){ //获取动态列表值到域
    var itemsLength = rowIndex;//行数
    //alert("itemsLength"+itemsLength);
    //第一列
    var sum="";
    for (var i = 0; i < itemsLength; i++) {
    //TrArray1[i] =document.getElementsByClassName('work1')[i].value;
    TrArray1[i] =document.getElementById('work1'+i).value;
    //sum.push(TrArray1[i]);
    sum = sum + TrArray1[i]+"*";
    }
    alert(TrArray1);
    }

    function showTable(){ //审批、结束环节的展示
    //第一列
    //var text1=document.getElementById("Text1").value;
    var showTd1= new Array();

    //第二列
    //var text2=document.getElementById("Text2").value;
    var showTd2= new Array();
    //var tbHTML1 = "<table><tbody>";
    //for(var i=0;i<showTd1.length - 1;i++){
    //tbHTML1=tbHTML1+"<tr><td>"+showTd1[i]+"</td><td>"+showTd2[i]+"</td></tr>";
    //}
    //tbHTML1=tbHTML1+"</table></tbody>";
    //alert(tbHTML1);
    //document.getElementById("#{id:tb1}").value = tbHTML1;

    for(var i=0;i<TrArray1.length;i++){
    var row=aaa("tb1").insertRow(aaa("tb1").rows.length);
    col0 = row.insertCell(0);
    col1 = row.insertCell(1);
    //col2 = row.insertCell(2);

    col0.width="300px"; //控制TD样式
    col1.width="300px";
    col0.style.wordWrap="break-word";
    col1.style.wordWrap="break-word";
    col0.style.fontSize="18px";
    col1.style.fontSize="18px";
    col0.style.fontFamily="FangSong";
    //向TD插入内容
    col0.innerHTML ="<tr name='btn' index=""+ i +"">" +
    "<td id='wan1"+i+"'>"+TrArray1[i]+"</td>";
    col1.innerHTML ="<td>"+TrArray2[i]+"</td></tr>";
    row.setAttribute("id", "row" + i);
    row.setAttribute("name", "row" + i);

    }

    }
    //style="position:absolute ;top:-1px;left:0px;border-collapse:collapse;"
    </script>

    </head>
    <body>
    <p>
    <input name="btnAddLine" type="button" id="btnAddLine" onClick="return add()" value="加入一行">
    <input name="btnAddLine1" type="button" id="haha" onClick="return getDongtai()" value="取数">
    <input name="btnAddLine2" type="button" id="haha1" onClick="return showTable()" value="show">
    </p>
    <table border="" cellspacing="" cellpadding="">
    <tr>
    <td>
    <div>
    <table name="tb" id="tb" >

    </table>
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <div id="one" style=" 1030px;height:auto;min-height:50px;padding-top:0px;overflow:auto;" >
    <table frame="void" border="1" cellspacing="0" cellpadding="0" bordercolor="black" name="tb1" id="tb1" width="1030px" style="border-collapse:collapse; ">

    </table>
    </div>
    </td>
    </tr>
    </table>


    </body>
    </html>

  • 相关阅读:
    CKA-Kubernets(K8s) (一)
    CKA-docker 容器的管理
    CKA-docker 镜像的管理
    CKA-docker 基础
    开年自省系列—— 阅读完一本书《财务之路系列》 读书笔记
    Sublime开启VIM模式
    JavaScript 踩坑开始(ing...)
    代码思考题玩玩
    P2016 战略游戏-树形DP
    皇宫看守-树形DP
  • 原文地址:https://www.cnblogs.com/275147378abc/p/6155141.html
Copyright © 2011-2022 走看看