插入新行，在Javascript中隱藏列？

我有一個JavaScript這樣的：插入新行，在Javascript中隱藏列？

<script language="javascript"> 
function addRow(tableID) { 

      var table = document.getElementById(tableID); 

      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 

      var colCount = table.rows[0].cells.length; 

      for(var i=0; i<colCount; i++) { 

       var newcell = row.insertCell(i); 

       newcell.innerHTML = table.rows[0].cells[i].innerHTML; 

       switch(newcell.childNodes[0].type) { 
        case "text": 
          newcell.childNodes[0].value = ""; 
          break; 
       } 
      } 
     } 

      var showMode = 'table-cell'; 
      if (document.all) showMode='block'; 
      function toggleVis(btn){ 
      btn = document.forms['tcol'].elements[btn]; 
      cells = document.getElementsByName('t'+btn.name); 
      mode = btn.checked ? showMode : 'none'; 
      for(j = 0; j < cells.length; j++) cells[j].style.display = mode; 
      } 
</script>

以下是節目HTML /隱藏列，並插入新行：

<body> 

<form name="tcol" onsubmit="return false"> 
Show columns 
<input type=checkbox name="col1" onclick="toggleVis(this.name)" checked> 1 
<input type=checkbox name="col2" onclick="toggleVis(this.name)" checked> 2 
<input type=checkbox name="col3" onclick="toggleVis(this.name)" checked> 3 
</form> 

<input type="button" value="Insert Row" onclick="addRow('dataTable')"> 
<table id="dataTable"> 
<tr> 
<td name="tcol1" id="tcol1"><input type="text" name="txt1"></td> 
<td name="tcol2" id="tcol2"><input type="text" name="txt2"></td> 
<td name="tcol3" id="tcol3"><input type="text" name="txt3"></td> 
</tr> 
</table>

我可以插入行，但只有第一排的列可以被隱藏。是因爲輸入字段的屬性？如果是的話，我如何將標籤屬性添加到新行？請幫我解決這個問題。謝謝。

來源

2012-12-28 Lorek Bryanson

你讓這個waaay太複雜了。 – mrtsherman

也表=不好。 – Sir

newcell.innerHTML = table.rows[0].cells[i].innerHTML不會複製屬性，以新的細胞，這將剛纔複製的table.rows[0].cells[i] cell.

所以name屬性不會得到應用newcelll職能的工作通過發現細胞name屬性的innerHTML 。

您可以在addRow中添加以下代碼，將name屬性應用於新單元。

function addRow(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var colCount = table.rows[0].cells.length; 

     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      newcell.setAttribute("name",table.rows[0].cells[i].getAttribute("name"));//use setAttribute to set any attribute of dom element 
     newcell.style.display = table.rows[0].cells[i].style.display ; // to copy display style 
      newcell.id = table.rows[0].cells[i].getAttribute("name"); // IE workaround for getting this table cell in getElementsByName , see this http://stackoverflow.com/questions/278719/getelementsbyname-in-ie7 

      switch(newcell.childNodes[0].type) { 
       case "text": 
         newcell.childNodes[0].value = ""; 
         break; 
      } 
     } 
    }

來源

2012-12-28 07:33:29

感謝您的幫助。但是，在從現有字段獲取屬性後，如何將name屬性添加到新字段的標記中？ –

請忽略我最後一個問題。我已將name屬性應用於新行，但第一行旁邊的列仍不能隱藏。你有什麼想法可能是什麼問題？ –

嘿，我用更改更新了我的答案，使用setAttribute將複製名稱屬性設置爲新的單元格。 IE的getElementsByName也存在問題，請參閱http://stackoverflow.com/questions/278719/getelementsbyname-in-ie7，「支持NAME屬性和ID屬性的元素包含在由getElementsByName返回的集合中方法，但帶有NAME expando的元素不包含在集合中;因此，此方法不能用於通過名稱檢索自定義標籤「，所以解決方法是設置ID屬性。 –

我知道這並不能回答你的具體問題，但是你的代碼需要很多幫助。你做事的方式很容易破損，並且可以用更簡單的方式完成。這是一個例子。我使用jQuery來節省自己的時間，但是如果你不想使用jQuery，原則可以被映射爲純javascript。

請勿使用內嵌JavaScript調用。您可以監視複選框的父容器，並確定哪一個被更改。
不要監視複選框的onclick事件。改爲使用onchange。這更安全。
您可以使用html5數據屬性來存儲點擊了哪個複選框。例如，<input type=checkbox name="col1" checked data-number="1"> 1。
使用單擊的數據字段確定要修改的表格中的哪個單元格。

http://jsfiddle.net/E3D2U/

$('input:checkbox').change(function() { 
    //which checkbox was changed? 
    var number = $(this).data('number') - 1; 
    //get the table cell that matches the clicked number 
    var targetTD = $('#dataTable td')[number]; 
    //if our checkbox is checked then... 
    if ($(this).is(':checked')) { 
     $(targetTD).css('background-color', 'white');    
    } 
    else { 
     $(targetTD).css('background-color', 'yellow');     
    } 
});

來源

2012-12-28 06:52:04 mrtsherman

謝謝你的建議。我真的想用你的代碼作爲例子，但是對於標籤屬性來說不是一樣的嗎？在你的例子中，我如何將數據編號添加到新行標記中？ –

我甚至不確定'tag'屬性是什麼，因爲html中不存在這樣的事情。屬性類似於checked =「checked」或「name =」foo「'。「標籤」對我來說意味着什麼。 – mrtsherman

你有其他的例子可以參考嗎？ –

插入新行，在Javascript中隱藏列？

回答

相關問題