Question

以下是我的源代码

我需要使用javascript中的复选框动态添加表格列，如果我取消选中该复选框，则需要禁用表格中的特定列，如果我再次单击相同的复选框，则列应出现在同一位置，所以请帮助我要纠正这个问题....

<!DOCTYPE html>
<html>
<head>
    <title>1.Table</title>
    <style>
    #Whole-Wrapper
    {
        background:gray;
        height:700px;
    }

    h1{text-align:center;}

    table,th,td
    {
        border:1px solid black;
        border-collapse:collapse;
    }

    td{padding:10px;}

    #Wrapper
    {
        width:90%;
        margin:10% auto;
        border:1px solid black;
    }

    #div1
    {
        float:left;
        width:50%;
        background:lightblue;
    }


    #div2
    {
        float:left;
        width:50%;
        background:lightyellow;
        height:256px;
    }

    #ClearFix
    {
        clear:both;
    }


    </style>
</head>
<body>
<div id="Whole-Wrapper">
<h1>Create Table Using Checkbox</h1>
    <div id="Wrapper">

        <div id="div1">
            <h2>First Column</h2>
            <input type="checkbox" id="chk1" onclick="myFunction(1)"><label>First Checkbox</label><br><br>
            <input type="checkbox" id="chk2" onclick="myFunction(2)"><label>Second Checkbox</label><br><br>
            <input type="checkbox" id="chk3" onclick="myFunction(3)"><label>Third Checkbox</label><br><br>
            <input type="checkbox" id="chk4" onclick="myFunction(4)"><label>Fourth Checkbox</label><br><br>
            <input type="checkbox" id="chk5" onclick="myFunction(5)"><label>Fifth Checkbox</label><br><br>
        </div>

        <div id="div2">
            <h2>Second Column</h2>
            <table id="mtTbl">
                <tr id="Head"></tr>

                <tr id="Tr1"></tr>

                <tr id="Tr2"></tr>

                <tr id="Tr3"></tr>
            </table>
        </div>
        <div id="ClearFix"></div>
    </div>
</div>  
    <script>
    function myFunction(cellNo)
    {
        var a = document.getElementById("chk"+cellNo);

        if(a.checked)
        {
            var x = document.createElement("TH");
            var y = document.createTextNode("Table Header"+cellNo);
            x.appendChild(y);
            document.getElementById("Head").appendChild(x);

            var x1 = document.createElement("TD");
            var y1 = document.createTextNode("Row"+cellNo);
            x1.appendChild(y1);
            document.getElementById("Tr1").appendChild(x1);

            var x2 = document.createElement("TD");
            var y2 = document.createTextNode("Row"+cellNo);
            x2.appendChild(y2);
            document.getElementById("Tr2").appendChild(x2);

            var x3 = document.createElement("TD");
            var y3 = document.createTextNode("Row"+cellNo);
            x3.appendChild(y3);
            document.getElementById("Tr3").appendChild(x3);
        }
        else 
        {
            var delHead = document.getElementById("Head");
            delHead.deleteCell(cellNo-1);

            var col1 = document.getElementById("Tr1");
            col1.deleteCell(cellNo-1);

            var col2 = document.getElementById("Tr2");
            col2.deleteCell(cellNo-1);

            var col3 = document.getElementById("Tr3");
            col3.deleteCell(cellNo-1);


            /*var delHead = document.getElementById("Head");
            delHead.deleteCell(cellNo-cellNo);

            var col1 = document.getElementById("Tr1");
            col1.deleteCell(cellNo-cellNo);

            var col2 = document.getElementById("Tr2");
            col2.deleteCell(cellNo-cellNo);

            var col3 = document.getElementById("Tr3");
            col3.deleteCell(cellNo-cellNo);

            var col4 = document.getElementById("Tr4");
            col4.deleteCell(cellNo-cellNo)

            var b = document.getElementById("Head");
            b.style.display = "chk"+cellNo.checked ? "block" : "none";

            var c = document.getElementById("Tr1");
            c.style.display = "chk"+cellNo.checked ? "block" : "none";

            var d = document.getElementById("Tr2");
            d.style.display = "chk"+cellNo.checked ? "block" : "none";

            var e = document.getElementById("Tr3");
            e.style.display = "chk"+cellNo.checked ? "block" : "none";*/
            }
    }
    </script>
</body>
</html>

Answer 1

我用javascript示例为你创建了一个codepen。

http://codepen.io/anon/pen/EyQZyw

脚本刚刚更改如下。

function myFunction(cellNo)
{
    var a = document.getElementById("chk"+cellNo);

    if(a.checked)
    {
        var x = document.createElement("TH");
        var y = document.createTextNode("Table Header"+cellNo);
        x.appendChild(y);
       x.id = "th"+cellNo; document.getElementById("Head").appendChild(x);

        var x1 = document.createElement("TD");
        var y1 = document.createTextNode("Row"+cellNo);
        x1.appendChild(y1);
       x1.id = "Tr1td"+cellNo; document.getElementById("Tr1").appendChild(x1);

        var x2 = document.createElement("TD");
        var y2 = document.createTextNode("Row"+cellNo);
        x2.appendChild(y2);
       x2.id = "Tr2td"+cellNo; document.getElementById("Tr2").appendChild(x2);

        var x3 = document.createElement("TD");
        var y3 = document.createTextNode("Row"+cellNo);
        x3.appendChild(y3);
       x3.id = "Tr3td"+cellNo; document.getElementById("Tr3").appendChild(x3);
    }
    else 
    {            
        document.getElementById("th"+cellNo).remove();
      document.getElementById("Tr1td"+cellNo).remove();
      document.getElementById("Tr2td"+cellNo).remove();
      document.getElementById("Tr3td"+cellNo).remove();
        }
}

使用javascript中的复选框动态添加表列

1 个答案: