`
炫烂彩虹
  • 浏览: 16936 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

td的rowspan属性在IE和FF下的不同

阅读更多

 1、是否存在的判断
    IE下,不管有没有设置rowspan这个属性,IE均认为有此属性,且默认值为1。而FF中,则根据DOM中的设置进行判断,DOM中没有写rowspan,则不认为td具备此属性。
    因此用JQUERY判断某行的具有多行特性的TD用下面这种方法是不行的。
    $("table tr:eq(0) td[rowspan]").length 
    这个写法,在IE下为所有的TD数量,但是在FF下得到的是DOM中写了ROWSPAN值的TD数量
    可以这样写:
        $("table tr:eq(0) td").filter(function(){
               return $(this).attr("rowspan")>1
        }).length
   IE,FF,得到的均为7
  
   2、删除某行后,ROWSPAN的变化
    IE在删除一行后,会自动把对应的rowspan的值减1。而FF不减,它的值严格按照最初写的DOM中的ROWSPAN,需要您亲自写代码把rowspan的值减掉1

 

<script language="javascript">
    $(document).ready(function(){
        alert($("table tr:eq(0) td[rowspan]").length);
        alert($("table tr:eq(0) td:not([rowspan])").length);
        alert($("table tr:eq(0) td").filter(function(){
               return $(this).attr("rowspan")>1 
        }).length);
            
        $("input").click(function(){
            $("table tr:eq(1)").remove();
            alert($("table tr:eq(0) td:eq(0)").attr("rowspan"));
        });   
    });
</script>

 

<body>
<table >                
    <tr><td rowspan=4>参数名称1<br/><a>新增</a><a>删行</a></td><td rowspan=4>字段名</td><td rowspan=4>编号</td><td rowspan=4>本参数值用于进行用户的设置</td><td>参数值1</td><td>参数值名1</td><td><a>修改</a><a>删除</a></td></tr>
    <tr><td>参数值2</td><td>参数值名1</td><td><a>修改</a><a>删除</a></td></tr>
    <tr><td>参数值3</td><td>参数值名1</td><td><a>修改</a><a>删除</a></td></tr>
    <tr><td>参数值4</td><td>参数值名1</td><td ><a>修改</a><a>删除</a></td></tr>
</table>
<input type="button" value="click me">
</body>

 

分享到:
评论
1 楼 tedeyang 2010-05-05  
最烦浏览器的兼容问题了。
所以还是flex简单,html5闪一边去吧

相关推荐

    web程序设计 表格 其中包含table td td常见的属性

    本篇将详细阐述`&lt;table&gt;`、`&lt;td&gt;`(表格数据单元格)及其常见属性,帮助你更好地理解和应用这些基础知识。 首先,我们来了解`&lt;table&gt;`元素。`&lt;table&gt;`是HTML中定义表格的根元素,它包含了表格的整个结构,包括表头...

    colspan和rowspan

    在网页设计中,`colspan` 和 `rowspan` 是两个非常重要的属性,它们用于HTML表格元素中,帮助我们合并单元格,实现更复杂的布局。本文将深入探讨这两个属性的含义、用法以及它们在实际应用中的作用。 首先,`...

    jquery table rowspan 表格单元格合并Demo.zip

    在 jQuery 中,我们可以利用 DOM 操作方法来动态地设置或修改表格中单元格的 `rowspan` 属性。这通常涉及到获取表格元素,遍历其子单元格,然后根据需求调整 `rowspan`。以下是一个简单的步骤: 1. **选择表格元素*...

    table-rowspan表格自动合并单元格插件

    9. **浏览器兼容性**:考虑到不同的浏览器可能对某些特性支持不同,开发插件时需要考虑兼容性问题,可能需要使用polyfills或其他技术确保在不同环境下都能正常工作。 通过这个"table-rowspan表格自动合并单元格插件...

    使用HTML开发商业网站-td标签属性课件.pptx

    在实际开发中,学习`&lt;td&gt;`标签时,应特别关注`colspan`和`rowspan`属性,它们对于创建复杂的表格布局至关重要。其他属性如`width`、`height`、`align`、`valign`等虽然也可以使用,但现代网页设计更推荐使用CSS进行...

    00:asp-DataGrid 表头跨行跨列.pdf

    "&lt;/tr&gt;&lt;tr class=tttable bgColor=#FFFFC0&gt;&lt;td align=center&gt;当日&lt;/td&gt;&lt;td align=center&gt;上次&lt;/td&gt;&lt;td align=center&gt;累计&lt;/td&gt;&lt;td align=center&gt;汇总&lt;/td&gt;&lt;td align=center&gt;当日&lt;/td&gt;&lt;td align=center&gt;上次&lt;/td&gt;&lt;td...

    Extjs 实现多行合并(rowspan)效果

    在ExtJS中实现多行合并(rowspan)的效果,通常是为了在数据表格中展示具有层次结构的数据,或者在某些特定情况下需要对表格行进行合并,以优化数据的展示。这通常涉及到对表格(GridPanel)的配置和自定义。下面...

    Vue实现数据表格合并列rowspan效果

    背景 现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩。 ...使用html实现是比较简单的,利用table... &lt;td rowspan=3&gt; 张三 &lt;/td&gt; &lt;td rowspan=3&gt; 3 &lt;/td&gt; &lt;td&gt;语文&lt;/td&gt; &lt;td&gt;100&lt;/td&gt; &lt;/tr

    [备忘]工作中遇到的一个含rowspan情况table画虚线问题

    在IT行业中,尤其是在网页开发和前端设计领域,我们经常需要处理复杂的表格布局,其中`rowspan`属性是一个关键元素。本文将围绕“含`rowspan`情况下的`table`画虚线问题”展开讨论,结合标签提供的“源码”和“工具...

    IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性

    还有一些其他属性,如`tabindex`、`readonly`、`maxlength`、`rowspan`、`colspan`、`usemap`、`frameborder`和`contenteditable`,在IE6/7中也存在类似的问题。为了解决这些问题,可以创建一个函数,像示例代码那样...

    jquery.table.rowspan.js 表格自动合并单元格插件

    `jQuery.table.rowspan.js`插件的核心思想是遍历表格中的每一行,根据设定的规则(如相同的值或特定条件)来检测是否需要合并单元格,并动态设置`rowspan`属性。这样,原本需要在服务器端进行的复杂逻辑计算,被转移...

    HTML表格标记教程(34):跨行属性ROWSPAN

    在第二行的第一个`&lt;TD&gt;`单元格中,我们设置了`rowSpan=3`,这意味着这个单元格会跨越三行,也就是第二、第三和第四行。这样,"网页制作软件"这个类别就会覆盖接下来的两行,而原本在下面的"Fireworks"、"Dreamweaver...

    通过jquery还原含有rowspan、colspan的table的实现方法

    在使用jQuery还原表格时,基本思路是遍历表格的每一行(tr)和每一个单元格(td),并根据单元格的rowspan和colspan属性值去计算应该添加多少个空白的td元素,以保持表格结构的完整性。具体到实现步骤,可以分为以下...

    extjs3合并表头 rowspan

    "rowspan"属性在HTML表格中被用来合并行,而在ExtJS 3中,它用于实现类似的功能,即在数据网格的表头中合并单元格,以创建更复杂的布局和更清晰的数据组织。 在ExtJS 3中,如果你需要合并表头,你可能会使用`Ext....

    HTML表格代码

    &lt;td rowspan="3" width="1"&gt;&lt;/td&gt; &lt;td rowspan="2" width="1"&gt;&lt;/td&gt; &lt;td width="2"&gt;&lt;/td&gt; &lt;td bgcolor="#43B5C9"&gt;&lt;/td&gt; &lt;td width="2"&gt;&lt;/td&gt; &lt;td rowspan="2" width="1"&gt;&lt;/td&gt; &lt;td rowspan="3" width="1"&gt;&lt;/...

    html表格——表格合并.docx

    rowspan 属性通常使用在 td 和 th 标签中,用于合并多行单元格。例如: ```html &lt;th&gt;xuexuexi.com&lt;/th&gt; &lt;th&gt;SEO 学习 &lt;th&gt;SEM 学习 &lt;td&gt;html 代码&lt;/td&gt; &lt;td&gt;网站技术学习&lt;/td&gt; &lt;td rowspan="2"&gt;网站...

    javascript 动态table添加colspan\rowspan 参数的方法

    在这种情况下,应当直接操作`cell`对象的`rowSpan`和`colSpan`属性。 为了解决这个问题,可以按照以下步骤进行: 1. 首先获取到表格对象`document.tableId`,其中`tableId`是表格的ID。 2. 接着,找到表格中特定的...

    (代码方式!)如何让IE记住用户名和密码!绝对可以用(代码方式,物有所值!!!加精!~!)

    &lt;td width="107" rowspan="2"&gt;&lt;img src="images/logo.png" width="93" height="48"&gt;&lt;/td&gt; &lt;td width="55"&gt;用户名:&lt;/div&gt;&lt;/td&gt; &lt;td width="163"&gt; &lt;/td&gt; &lt;td width="84" rowspan="2"&gt;()"&gt;&lt;/td&gt; &lt;td height...

    HTML制作表格(ppt文档).ppt

    rowspan属性表示跨多少行,例如:&lt;td rowspan="3"&gt;早上菜谱&lt;/td&gt; 三、美化修饰 美化修饰是指对表格的背景图片、背景色、表格的高度和宽度、文字对齐方式等进行设置。 可以使用background属性设置表格的背景图片,...

Global site tag (gtag.js) - Google Analytics