添加表列動態使用複選框中的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

回答

相關問題