javascript 控制 table tr display block 显示模式时,只对第一个单元格有效

有一个简单的 table:

<table >
 <tr >
 <th>编号</th>
 <th>类型</th>
 <th>详细</th>
 <th>创建时间</th>
 <th>修改时间</th>
 <th>操作</th>
 </tr>

 <tr>
 <td>5</th>
 <td>TECH</th>
 <td>测试内容</th>
 <td>2014?01?10 16:56:31</th>
 <td>??</th>
 <td>修改 删除</th>
 </tr>

 <tr id="id_dync" style="display:none">
 <td colspan=6>
 <div id=xxxx >测试内容</div>
 </td>
 </tr>

</table>

希望通过 javascript 控制 第三 行的 tr 隐显状态:

var tr_modifing = document.getElementById( "id_dync" );
tr_modifing.style.display = "block";

这种将 style.display 设置成 block 后, 会出现 只对第一个单元格 td 有效的情况:

原因是 将 tr.style.display = “block” 后, 该 tr 就不是普通的 【表格】之【行】了, 而就像普通的 div 一样普通的块, 所以下面的

<td colspan=6 >

也会随着失效, 正确的做法是

var tr_modifing = document.getElementById( "id_dync" );
tr_modifing.style.display = "";

即 将 tr 的 显示模式设置为 空,这个属性dispaly后面不加任何的东西,很奇怪,这样就兼容了Firefox和IE了。

时间: 2024-07-29 01:03:51

javascript 控制 table tr display block 显示模式时,只对第一个单元格有效的相关文章

JS实现填报时对修改过的单元格进行标识

1. 描述 在填报预览时,对单元格编辑后,其左上角有个红色标记,但非常不明显,用户很难注意到.有没有什么好的办法,对单元格操作后,将其做较明显的特殊标记处理,方便用户识别呢? 如图所示:对单元格进行操作后,将其单元格进行背景色着色.文本加粗等标记. 2. 实现方法 打开模板 %FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt 2.1 方法1:编辑结束后修改单元格样式 控件编辑后事件中修改单元格样式,选中需要设

整理BOM时写的关于拆分单元格的VB代码

Public Function AddRows(pos As Integer, amount As Integer) Dim rpos As Integer rpos = pos + 1 For i = 1 To amount ActiveSheet.Rows(rpos).Insert Next i End Function Public Function PasteRows(startPos As Integer, amount As Integer) Dim rStartPos As Int

shell中使用while循环ssh时只循环第一行的问题解决

最近在写一个shell脚本,本想使用for循环来读取文件里面的内容,可是发现文件里每一行都有空格的,明显用for循环行不通过,我的目的是想一行一行读取文件内容,于是果断使用while循环来实现,可问题来了,当ssh完第一行后就退出了,后面都没有执行成功,如何避免自动读取一行就跳出while循环,此文将详细解释其原因. 文件内容如下:[[email protected]_hai~]#cat 2.txt scjz 2144 10.16.100.113  89scjz 2144 10.16.100.1

css Table布局-display:table

使用表格布局一直是一个敏感的主题.一般情况下,Web开发人员考虑基于表格布局是禁忌.尽管反对的理由看起来证据很充分,但是大多数开发者除了谴责基于表格的布局,都无法提供完善的使用场景."表格不好." 从早期反对HTML Table(<table>标签)开始这种势头就非常强劲.几代开发者被成功洗脑,根深蒂固的认为:任何使用表格都是邪恶的. 诚然,我也是避免使用表格布局的开发者之一,即使是显示表格数据. 我甚至曾经斥责我的下属开发者同事,当他们使用 display:table 用

display:table、display:table-row和display:table-cell的用法

display:table和display:table-cell的用法: 建议:尽可能的手写代码,可以有效的提高学习效率和深度. display属性的table和table-cell属性值不怎么常用,主要是浏览器的兼容性并不好,因为万恶的IE6和IE7还有相当一部分用户在使用,不过并非没有它们展露头角的机会,在display:table-cell的用法简介中已经对display:table-cell做了简单的介绍,但是感觉不够全面,下面就集合实例稍稍全面的介绍一下. 三个属性值的基本概念: 1.

IE 中单元格的 colspan 属性在某些情况下会影响 TABLE 元素的自动布局

今天在写一个jsp页面时,遇到一个如下的问题:在一个table中写了如下内容,table中定义了4列,在firefox中能正常显示,而在ie8中,显示不正常, 如下如图1:第二,三,四列宽度发生变化,和代码中定义的宽度显示不一致, 图1(IE8): 图2(firefox): 代码如下: 1 <table id="cont2"> 2 <tbody> 3 <tr> 4 <td class="ct_t"> 5 是否分包<

javascript如何便利表格中的行和单元格

javascript如何便利表格中的行和单元格:尽管现在普遍使用div布局来替代表格,这并不说明table是一无是处的,在制作表格类型的结构的时候还是使用table更为有效.在实际应用中有时候需要便利表格中的行和单元格,下面就通过实例简单介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author&quo

table边框重叠导致的单元格边框宽度问题

偶然的看了一眼别人写的CSS,在注释中,说有table元素边框折叠(塌陷.重叠,那个词合适?)时,不同浏览器对单元格边框的计算是不一样的,然后还在注释中写了链接地址Border Collapse differences in FF and Webkit:对于死心眼的技术男来说,不探究一番究竟,还真睡不着觉了. 愤然打开网址(每次都很激愤,经常由于各种原因打开的巨慢),理清了思路,原来大体意思是说:虽然他们处理的不一样,但最后呈现出来的界面都是一样的.然后我慢慢的思考下,好像就是 Firefox

table边框表头单元格空间合并等设置

表格由<table>标签来定义,每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本.图片.列表.段落.表单.水平线.表格等等. 1 HTML 表格的基本结构: 2 <table>…</table>:定义表格 3 <th>…</th>:定义表格的标题栏(文字加粗) 4 <tr>…<