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

JavaScript016

js点击tr后 在tr下面加一行tr ，再点就隐藏?,第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=0i<trs.lengthi+=2){

      (function(i){

         trs[i].onclick=function(){

            for(var j=0j<trs.lengthj+=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>

$("table tr").each(function(i){

    console.log(i)

})

----根据行数自动循环显示隐藏