Question

js点击tr后 在tr下面加一行tr ，再点就隐藏?

<script language="javascript">
function f(){
var obj = document.getElementById("c");
if(obj.style.display==""){
obj.style.display = "none";
}else{
obj.style.display = "";
}
}
</script>
<table >
<tr onclick="f();">
<td height="70" bgcolor="#00FF99">点击本行</td>
</tr>

<tr id="c" style="display:none">
<td height="60" bgcolor="#CC33CC"></td>
</tr>
<tr onclick="f();">
<td height="70" bgcolor="#00FF99">点击本行</td>
</tr>
<tr id="c" style="display:none">
<td height="60" bgcolor="#CC33CC"></td>
</tr>
</table>

这段代码点击tr 要在点击tr的下面加个tr行显示 在点就隐藏 点第二个tr一样下面加个tr
显示，并把之前点的显示的tr隐藏 怎么弄？ 就是类似DataTables 点击表格显示详情的功能。

Answer 1

<style>
   tr:nth-child(odd){
      height:70px;
      background-color:#0f9
   }
   tr:nth-child(even){
      display:none;
      height:60px;
      background-color:#c3c
   }
</style>
<script>
window.onload=function(){
   var trs=document.getElementsByTagName("tr");
   for(var i=0;i<trs.length;i+=2){
      (function(i){
         trs[i].onclick=function(){
            for(var j=0;j<trs.length;j+=2){
               if(j==i){
                  if(trs[j+1].style.display!="table-row"){
                     trs[j+1].style.display="table-row";
                  }else{
                     trs[j+1].style.display="none";
                  }
               }else{
                  trs[j+1].style.display="none";
               }
            }
         }
      })(i);
   }
}
</script>
<table>
<tr><td>点击本行</td></tr>
<tr><td>1</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>2</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>3</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>4</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>5</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>6</td></tr>
</table>