javascript隐藏TR

JavaScript023

javascript隐藏TR,第1张

你可以给TR一个ID

获后通过GetElementById的方法拿到对象,然后修改 它的Display属性为"none"就可以了

像这样:

HTML代码:

<tr id="tr01">

<td>

第一行

</td>

<td>

<input type="text" name="text1" id="text1">

</td>

</tr>

Javascript 代码:

function hideSomething(tid){

var ele = document.getElementById(tid)

if(ele){

ele.style.display ='none'

}

}

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

如下代码可以实现：

<script src="jquery-1.9.1.min.js"></script>

<script>

$(document).ready(function(){

var ids = "1" //要隐藏的id的前半部分

$("#table1 tr").each(function(){

if($(this).attr("id").length > 0){

if($(this).attr("id").split("-")[0] == ids)

$(this).hide()

}

})

})

</script>

<table id="table1">

<tr id="1-11B"><td>1-11B</td></tr>

<tr id="2-23B"><td>2-23B</td></tr>

<tr id="1-12B"><td>1-12B</td></tr>

<tr id="2-26B"><td>2-26B</td></tr>

<tr><td>无ID</td></tr>

</table>

补充：

如果是input的话：

<script src="jquery-1.9.1.min.js"></script>

<script>

$(document).ready(function(){

var ids = "2" //要改值的id的前半部分

$("input[type='text']").each(function(){

if($(this).attr("id").length > 0){

if($(this).attr("id").split("-")[0] == ids)

$(this).val("0")

}

})

})

</script>

<input type="text" id="1-11B" value="1-11B" />

<input type="text" id="2-12B" value="2-12B" />

<input type="text" id="1-16B" value="1-16B" />

<input type="text" id="2-18B" value="2-18B" />