Fatal编程技术网
  • javascript/
  • 在javascript中使用复选框动态添加表列

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

javascript html css

在javascript中使用复选框动态添加表列,javascript,html,css,Javascript,Html,Css,下面是我的源代码 我需要在javascript中使用复选框动态添加表列，如果我取消选中复选框，则需要禁用表中的特定列，如果我再次单击相同的复选框，则该列应显示在相同的位置，因此请帮助我纠正此问题 <!DOCTYPE html> <html> <head> <title>1.Table</title> <style> #Whole-Wrapper { background:gra

下面是我的源代码

我需要在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>


1.表格
#整包装
{
背景：灰色；
高度：700px；
}
h1{文本对齐：居中；}
表，th，td
{
边框：1px纯黑；
边界塌陷：塌陷；
}
td{padding:10px；}
#包装纸
{
宽度：90%；
利润率：10%自动；
边框：1px纯黑；
}
#第一组
{
浮动：左；
宽度：50%；
背景：浅蓝色；
}
#第二组
{
浮动：左；
宽度：50%；
背景：浅黄色；
高度：256px；
}
#ClearFix
{
明确：两者皆有；
}
使用复选框创建表
第一列
第一个复选框


第二个复选框


第三个复选框


第四个复选框


第五个复选框


第二列
函数myFunction（cellNo）
{
var a=document.getElementById（“chk”+cellNo）；
如果（a.勾选）
{
var x=document.createElement（“TH”）；
var y=document.createTextNode（“表头”+cellNo）；
x、 儿童（y）；
文件.getElementById（“头”）.appendChild（x）；
var x1=document.createElement（“TD”）；
var y1=document.createTextNode（“行”+cellNo）；
x1.儿童（y1）；
document.getElementById（“Tr1”）.appendChild（x1）；
var x2=document.createElement（“TD”）；
var y2=document.createTextNode（“行”+cellNo）；
x2.儿童（y2）；
document.getElementById（“Tr2”）.appendChild（x2）；
var x3=document.createElement（“TD”）；
var y3=document.createTextNode（“行”+cellNo）；
x3.儿童（y3）；
document.getElementById（“Tr3”）.appendChild（x3）；
}
其他的
{
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？”块：“无”；
var c=document.getElementById（“Tr1”）；
c、 style.display=“chk”+cellNo.checked？”块：“无”；
var d=document.getElementById（“Tr2”）；
d、 style.display=“chk”+cellNo.checked？”块：“无”；
var e=document.getElementById（“Tr3”）；
e、 style.display=“chk”+cellNo.checked？”块：“无”*/
}
}
我用javascript示例为您创建了一个代码笔

脚本更改如下

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示例为您创建了一个代码笔

脚本更改如下

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();
        }
}
禁用一个列意味着什么？禁用一个列，你想考虑jQuery吗？禁用一个列是什么意思？禁用一个列意味着隐藏一个CyrnOn:你想考虑jQuery？Ya，当我点击所有的复选框时，它将工作得很好，我的问题是如果我取消了复选框被删除的第二个复选框。如果我再次单击相同的复选框，则表示它将在表的末尾创建，因此，我的概念是，如果再次单击复选框，则意味着它将再次显示在第二个位置，而不会更改，因此请帮助我确定您是否熟悉jqeury，或者您只需要JavaScript？我只需要JavaScript，因为JavaScript是我唯一的要求A当我单击所有复选框时，它将工作良好，我的问题是如果取消选中第二个复选框该复选框已被删除，如果再次单击相同的复选框，则表示它将在表的末尾创建，因此，我的概念是，如果再次单击复选框，则意味着它将再次显示在第二个位置，而不会发生更改。因此，请帮助我了解您是否熟悉jqeury，或者您只需要JavaScript？我只需要JavaScript，因为JavaScript只是我的要求