- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
根据我对 JavaScript 的理解,任何属性都可以使用 element.attribute = newValue
设置。因此,我尝试使用 element.colspan = 2
设置多个表格单元格的 colspan,但它不起作用。任何建议表示赞赏。我的代码如下。
table td, table th{ border: 2px solid #0f0f0f; text-align:center; }
.noDisplay{ display:none; }
<html>
<body>
<table>
<tbody>
<tr class = "dateCells" ><td colspan = "1">DATE</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr class = "dateCells" ><td colspan = "1">DATE</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
</tbody>
</table>
<br>
<div onclick = "clicked()">CLICK<br>HERE</div>
<script>
function clicked(){
var cells = document.getElementsByClassName( 'cells' );
for( var i = 0; i < cells.length; i++ ){
cells[ i ].classList.remove( 'noDisplay' );
}
var dateCells = document.getElementsByClassName( 'dateCells' );
for( var i = 0; i < dateCells.length; i++ ){
dateCells[ i ].colspan = 2;
}
}
</script>
</body>
</html>
正如您在上面所看到的,由于某种原因,dateCells
元素的 colspan 没有从 1 更改为 2。
最佳答案
因为您将其添加到 tr elem,请注意,我仅将顶部的一个更改为 td,并且它扩展了,还有 colSpan 中的大写 S
function clicked(){
var cells = document.getElementsByClassName( 'cells' );
for( var i = 0; i < cells.length; i++ ){
cells[ i ].classList.remove( 'noDisplay' );
}
var dateCells = document.getElementsByClassName( 'dateCells' );
for( var r = 0; r < dateCells.length; r++ ){
dateCells[ r ].colSpan = "2";
}
}
table td, table th{ border: 2px solid #0f0f0f; text-align:center; }
.noDisplay{ display:none; }
<table>
<tbody>
<tr ><td colspan = "1"class = "dateCells">DATE</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr class = "dateCells" ><td colspan = "1">DATE</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
<tr><td>Cell One</td><td class = "cells noDisplay">Cell Two</td></tr>
</tbody>
</table>
<br>
<div onclick = "clicked()">CLICK<br>HERE</div>
关于javascript - 为什么我不能使用 .colspan 设置该元素的 colspan?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28036251/
根据我对 JavaScript 的理解,任何属性都可以使用 element.attribute = newValue 设置。因此,我尝试使用 element.colspan = 2 设置多个表格单元格
地点ID: 3 我想使用 JQuery 将第一个 TR 中未包含在完整页面中的第一个 Colspan="2"替换为 Colspan="4"。 谢谢。 最诚挚的问候,女士 最佳答案 这个 jQuery
您好,我有一个表,其中一行中的某些列与 colspan="2" 属性相关联。 此刻它看起来像这样: 我希望一行中连接的列的文本居中,但只有连接列中的文本 该行的表格数据(无限制)有如下代码 u
我是否可以检查现有表中的列数并将其分配给该表 colspan 的顶部? My code document.write('') document.write(' HEAD GRID ') for(i
我有一个表格,其中的单元格具有相同的值。我正在尝试使用 colspan 将它们合并在一起,但是为 colspan 设置属性没有任何效果。 https://jsfiddle.net/afn4f1q9/4
我已经使用了这个 .js 文件和以下方法。 https://code.jquery.com/jquery-3.3.1.js https://cdn.datatables.net/1.10.19/js/
我有一个响应式表格(在可变 div 宽度内设置为 100% 宽度),我试图在其中“重置”colspan,以便下一个表格行不会继承固定宽度 tds. 在我的示例中,数字 td(1 到 7)的固定宽度为
我的问题是,当我单击“span cell 1”按钮时,colspan 已正确完成,但头部 td 被扩展,并且随着表大小的增加,表布局受到干扰。它不能管理剩余的列吗? 如果我单击跨度单元格 1 按钮,则
这是第一个问题,所以请原谅我的任何错误。 我正在使用 JQuery Datatables 插件,并且必须向表中添加两行带有 colspan 的列标题。在 HTML 中硬编码没有问题,但现在我在表初始化
我使用的是响应式数据表并且工作正常,但问题出在 colspan 上。 当我使用带有 colspan 属性的 td 标签时,页面使用此链接引发错误 datatables warning table id
我正在使用以下 HTML 代码制作日历: Mon Tue Wed T
我有一张带有 colspan 的表,但表现不佳。 请比较以下 fiddle : http://jsfiddle.net/lucaswiener/WBdc8/ http://jsfiddle.net/l
jsfiddle 链接:http://jsfiddle.net/KMzjp/ 所以我试图根据表头 th 元素突出显示表列(有三个 th 元素,所以应该有三列,中间一列突出显示). 它在没有 colsp
我有一个包含很多行和列的表格。 现在我想像这样将 td "E8"分成两列: 什么是最好的解决方案? 最佳答案 单向: 您可以在同一行的所有其他单元格上使用 rowspan="2" 例子:
请看下面的html: Event Name City Date Price
我正在尝试使用 colspan 使图像与表格中的右侧对齐,并使带有文本的行在左侧对齐。当图像在左侧时,此方法通常有效,但现在我希望它在右侧,但它不起作用。请记住这是针对 outlook 电子邮件的,因
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-top
帮助!我在这里拔头发。我正在尝试 a) 在此表的第一行和第三行中执行 colspan,但它似乎不起作用。我希望两行都跨越三列,并且 b) 我无法显示图像并且我已经在网上进行了广泛的搜索并且已经解决了我
我正在创建一个应用程序,它允许用户通过添加和删除列和行、设置列宽和单元格列跨度以及将元素插入表格单元格来操作表格结构。在测试时,我遇到了一个场景,其中 Firefox 4 和 Internet Exp
表名:主题 我的预期输出 我的代码 setActiveSheetIndex(0); $headers = array('School Name'); $objPHPExcel->get
我是一名优秀的程序员,十分优秀!