动态显示，隐藏Table的tr

最新推荐文章于 2023-09-03 15:43:15 发布

uN4ever

最新推荐文章于 2023-09-03 15:43:15 发布

阅读量1.2k

点赞数

分类专栏： html

html 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 < 
 html 
  xmlns 
 = 
 "http://www.w3.org/1999/xhtml" 
 > 

    
 
 < 
 head 
 > 
 
 < 
 meta 
  content 
 = 
 "text/html; charset=utf-8" 
  http-equiv 
 = 
 "Content-Type" 
  /> 
 
 < 
 script 
  type 
 = 
 "text/javascript" 
 > 
 
 //隐藏TR 
 
 function hide_tr() 
 
 { 
 
 alert("hide"); 
 
 var result_style = document.getElementById('dyn_tr').style; 
 
 result_style.display = 'none'; 
 
 } 
 
 //显示TR 
 
 function show_tr() 
 
 { 
 
 alert("show"); 
 
 var result_style = document.getElementById('dyn_tr').style; 
 
 result_style.display = 'table-row'; 
 
 } 

    
 
 </ 
 script 
 > 
 
 < 
 title 
 >未命名 1</ 
 title 
 > 
 
 </ 
 head 
 > 

    
 
 < 
 body 
 > 
 
 < 
 table 
  border 
 = 
 "1" 
 > 
 
 < 
 tr 
 >< 
 td 
 >1111</ 
 td 
 >< 
 td 
 >1111</ 
 td 
 ></ 
 tr 
 > 
 
 < 
 tr  
  id 
 = 
 "dyn_tr" 
  style 
 = 
 "display: none;" 
 >< 
 td 
 >222</ 
 td 
 >< 
 td 
 >222</ 
 td 
 ></ 
 tr 
 > 
 
 < 
 tr 
 >< 
 td 
 >333</ 
 td 
 >< 
 td 
 >333</ 
 td 
 ></ 
 tr 
 > 
 
 </ 
 table 
 > 
 
 < 
 input 
  type 
 = 
 "button" 
  value 
 = 
 "Hide" 
  onclick 
 = 
 "hide_tr()" 
 > 
 
 < 
 input 
  type 
 = 
 "button" 
  value 
 = 
 "Show" 
  onclick 
 = 
 "show_tr()" 
 > 
 
 </ 
 body 
 > 

    
 
 </ 
 html 
 > 