首页 新闻 搜索 专区 学院

table表格js方法隐藏行

0
悬赏园豆:15 [已解决问题] 解决于 2013-08-27 18:05

最近一个项目中遇到这个要求:

代码:

<table border=2 id='tableid'>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td rowspan=2>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
<tr><td>b2</td><td>b3</td><td>b4</td></tr>
<tr><td rowspan=2>c1</td><td>c2</td><td>c3</td><td>c4</td></tr>
<tr><td>e2</td><td>e3</td><td>e4</td></tr>
</table>

显示:

A B C D
a1 a2 a3 a4
b2 b3 b4
c1 c2 c3 c4
e2 e3 e4

 如何用JS 达到隐藏a2-a4,c2-c4的效果呢 :

A B C D
a1 b2 b3 b4
c1 e2 e3 e4
甲馨惗的主页 甲馨惗 | 初学一级 | 园豆:42
提问于:2013-08-21 11:07
< >
分享
最佳答案
1

只能用Js吗?JQuery实现要容易点~

收获园豆:12
幻天芒 | 高人七级 |园豆:36662 | 2013-08-21 11:24

可以用JQuery

甲馨惗 | 园豆:42 (初学一级) | 2013-08-21 11:30

有高招吗?隔行 的tr 要替换上一个tr?

甲馨惗 | 园豆:42 (初学一级) | 2013-08-21 11:32

@甲馨惗: 

var tab=document.getElementById("tableid");
    var trs=tab.getElementsByTagName("tr");
    for(var i=1;i<trs.length;i++){
        //这是有合并的行
        var tds=trs[i].getElementsByTagName("td");
        if(tds.length==4){
            for(var j=1;j<tds.length;j++){//有合并的行就隐藏后面的单元格
                tds[j].style.display='none';
            }
        }
    }


JS版本的!
幻天芒 | 园豆:36662 (高人七级) | 2013-08-21 11:36

@幻天芒: 

再加一个:

<table id="tableid2" border=2>
<tr><td>A2</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td rowspan=4>a1</td><td rowspan=2>a2</td><td>a3</td><td>a4</td></tr>
<tr><td>b2</td><td>b3</td></tr>
<tr><td rowspan=2>c1</td> <td>c2</td><td>c3</td></tr>
<tr> <td>e2</td><td>e3</td></tr>
</table><br/>

A2 B C D
a1 a2 a3 a4
b2 b3
c1 c2 c3
e2 e3

这时

 var tds 如何获取值呢?
甲馨惗 | 园豆:42 (初学一级) | 2013-08-21 13:33
其他回答(2)
0
for(var j=1;j<tds.length;j++){//有合并的行就隐藏后面的单元格
  if (j % 2 = 0)
tds[j].style.display='none'; }
收获园豆:3
geass.. | 园豆:1761 (小虾三级) | 2013-08-21 11:45
0

主要思想是想方法让要隐藏的单元格display='none' 就行了

用什么工具是次要的

Albert Fei | 园豆:2102 (老鸟四级) | 2013-08-21 13:55
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册