根據包含的td屬性隱藏表格行

Question

<table border="1">
 <tr>
  <td>
   <div class="xyz">Division 1</div>
  </td>
 </tr>
 <tr>
  <td>
   <div class="abc">Division 2</div>
  </td>
 </tr>
</table>

請注意， <td>內容是動態添加的。 我需要根據包含<div>類名稱的<td>隱藏第二個<tr> 。 並且請在css / javascript方法中建議使用，而不建議使用jQuery，因為html不支持jQuery

謝謝

Answer 1

嘗試這個

var div = document.getElementsByTagName("div");
for (var i = 0; i<div.length; i++) {
  if (div[i].className == "abc") {
  div[i].style.visibility="hidden";
  }
}

小提琴： http : //jsfiddle.net/4QNBs/

編輯

對於HIDE，父TR

var div = document.getElementsByTagName("div");
for (var i = 0; i<div.length; i++) {
  if (div[i].className == "abc") {
 // div[i].style.visibility="hidden";
      parenttd = div[i].parentNode;
      parenttr = parenttd.parentNode;
      parenttr.style.display="none";
  }
}

小提琴： http : //jsfiddle.net/4QNBs/3/

Answer 2

http://jsfiddle.net/6HQmP/1/

如果您想隱藏tr，則應基於div給出與tr相關的ID，在此我將div類名指定為tr id

HTML：

<table>
 <tr id='xyz'>
   <td>
    <div class="xyz">Division 1</div>
   </td>
 </tr>
 <tr id='abc'>
   <td>
    <div class="abc">Division 2</div>
   </td>
 </tr>
</table>

CSS：

var div_ele = document.getElementsByTagName("div");
for (var i = 0; i<div_ele.length; i++) {
  if (div_ele[i].className == "abc") {
     // document.getElementById("abc").style.display="none";
     div_ele[i].parentNode.parentNode.style.display="none";

  }
}

如果您不能給tr指定相對ID，則可以嘗試以下操作：

div_ele[i].parentNode.parentNode.style.display="none";

http://jsfiddle.net/6HQmP/2/

Answer 3

JSFiddle： http : //jsfiddle.net/Cheejyg/uaMxd/1/

HTML：

<table border="1">
    <tr>
        <td>
            <div class="xyz">Division 1</div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="abc">Division 2</div>
        </td>
    </tr>
</table>

JS：

var tr = document.getElementsByTagName('tr');

for(var i = 0; i < tr.length; i++) {
    switch(tr.item(i).getElementsByTagName('div').item(0).className) {
        case "abc":
        case "other div class names":
            tr.item(i).style.display = "none";
            break;
    }
}