javascript - 根据包含的 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>内容是动态添加的。我需要隐藏第二个 <tr>基于其 <td>包含 <div>类(class)名称。并且请建议在 css/javascript 方法中不要使用 jQuery，因为 html 不支持 jQuery

谢谢

Answer 1

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