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

我需要动态地添加表列使用复选框中的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>

来源

2016-07-19 raji kumar

你的意思是通过禁用列？ – ksav

禁止一列是指隐藏列 –

你要考虑的jQuery？ – tejpal

我已经为您创建一个codepen用JavaScript例子。

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(); 
     } 
}

来源

2016-07-19 13:07:56 tejpal

雅将工作很好，当我点击所有的复选框，什么是我的问题是，如果我取消勾选第二个复选框的复选框被删除，再次如果我点击相同的复选框意味着它会在表的末尾创造，所以我的概念是，如果再次单击该复选框意味着它将在其第2位置再次显示没有改变，所以请帮我 –

你舒服丝毫jqeury或者你只是想的JavaScript？ – tejpal

我只需要JavaScript，因为JavaScript只是我的要求 –

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

回答

相关问题