如何在列数为'x‘后拆分HTML表？
在列数为'x'后拆分HTML表可以通过以下步骤实现：
- 首先，使用HTML和CSS创建一个包含表格的网页。确保表格中的每一行都使用
<tr>标签定义，每个单元格使用<td>标签定义。 - 使用JavaScript获取表格的引用，可以通过
document.getElementById()或document.querySelector()方法来获取表格元素。 - 使用JavaScript计算表格的列数，可以通过获取表格的第一行，并使用
row.cells.length来获取单元格的数量。 - 根据指定的列数'x'，计算需要拆分的表格行数。可以使用
Math.ceil()函数将总行数除以列数并向上取整，得到拆分后的表格行数。 - 创建一个新的表格元素，并将其插入到原始表格之后。可以使用
document.createElement()方法创建新的<table>元素。 - 使用循环遍历原始表格的每一行，并将每一行的单元格内容复制到新的表格中。可以使用
cloneNode()方法克隆每个单元格，并使用appendChild()方法将克隆的单元格添加到新的表格行中。 - 将新的表格行添加到新的表格中。可以使用
appendChild()方法将新的表格行添加到新的表格中。 - 最后，将新的表格添加到原始表格之后。可以使用
insertAdjacentElement()方法将新的表格插入到原始表格之后。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table id="originalTable">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
</table>
<script>
// 获取原始表格的引用
var originalTable = document.getElementById('originalTable');
// 计算表格的列数
var columnCount = originalTable.rows[0].cells.length;
// 指定的列数
var x = 3;
// 计算需要拆分的表格行数
var rowCount = Math.ceil(originalTable.rows.length / x);
// 创建新的表格元素
var newTable = document.createElement('table');
// 循环遍历原始表格的每一行
for (var i = 0; i < rowCount; i++) {
// 创建新的表格行
var newRow = document.createElement('tr');
// 循环遍历每一行的单元格
for (var j = 0; j < x; j++) {
// 计算原始表格中的索引
var index = i * x + j;
// 检查索引是否超出原始表格的行数
if (index < originalTable.rows.length) {
// 克隆单元格并添加到新的表格行中
var cell = originalTable.rows[index].cells[0].cloneNode(true);
newRow.appendChild(cell);
}
}
// 将新的表格行添加到新的表格中
newTable.appendChild(newRow);
}
// 将新的表格添加到原始表格之后
originalTable.insertAdjacentElement('afterend', newTable);
</script>
</body>
</html>这样，原始表格将被拆分为指定列数的新表格。请注意，以上示例中的代码仅供参考，具体实现方式可能因实际需求而有所不同。
相关·内容
2回答
我正在尝试让一个表行一分为二，并在这么多列之后堆叠，但是我如何使用CSS做到这一点呢？ 我尝试使用td:nth-child(12)来定位第12列，并多次尝试css。 </td> <td>22</td> <td>24</td></
浏览 17提问于2019-05-08得票数 2
回答已采纳
如何在PySpark中将一个6位数拆分为一列4位数和一列两位数(例如: 201452分为2014年和52)。它应该系统地拆分第四个数字之后的6个数字。我已经尝试了pyspark.split(...)方法，但我不能根据位置拆分6位数字。如何指定此位置？split_col=py.sql.functions.split(lambda x: df_datetime["WEEKNR"], '4&#
浏览 23提问于2019-05-15得票数 0
回答已采纳
( a)我必须从表A加上一些自定义列创建表B。例如。表B应该有一些表A的列和一些额外的列(这些是静态值，如NULL、静态字符串和系统时间映射)。表A中的一列需要拆分为表B中的两列--示例:X列中的数据为A1234、B5678、0000，表B应该有两列: AlphaColumn
浏览 2提问于2021-12-16得票数 0
2回答
我想要创建一个PL/SQL函数，它将从给定的SQL查询返回格式化的HTML表内容。SQL输入查询可能有不同的列数。因此，如果我像SELECT x,y,z FROM mytable一样发送查询，我的函数应该返回一个三列(和许多行)的表。为了构建格式化的表，我必须遍历不同数量的列，并用单元格(TD)填充HTML行(TR)。如何在给定的SQL查询中找到列的动态数</em
浏览 2提问于2017-05-10得票数 0
回答已采纳
5回答
Server 2008 :我有一个包含三列Ship Qty, Size, Qty的表。目前，这是表中的数据。Qty3 3*20 ML 2 1*100 EA 200
3 3*20 ML
浏览 1提问于2011-06-29得票数 1
回答已采纳
我的问题是，我想让行数自动增加，但我不知道如何在javascript中为表设置列数。var x = document.createElement("TABLE"); createCell(row.insertCell(i), i, 'row');，那么如何为Javascript中的表设置列数</em
浏览 0提问于2018-07-18得票数 0
1回答
在许多文章中，我们可以发现最好的解决方案是删除不必要的列，并将基数较高的列拆分为两列或更多列。经过一些改变后，我的数据量变得更大了，我不知道为什么。更改前(表大小4463282609行) sar_Retail基数718621和大小224301336 Bsar_Retail_fraction基数为10001，大
浏览 1提问于2020-10-28得票数 0
最初有一个只有一行和一定数量列的表。我想问您，是否可以将每个单元格(Td)拆分成给定数量的行，从此列开始，一直持续到最后一列。
如您所见，将第一列划分为2行，也将下面的列划分为2行。然后，如果我选择将第二列拆分为2行，则这种划分应该只适用
浏览 1提问于2013-10-16得票数 1
我面临一个问题，第一列是单独获得圆角和背景，所以为了解决它，我需要添加一个空行与表中的总列数，并在添加后，表格显示适当的圆角和背景。表有许多记录，并且它确实在多个页面上拆分，并且行为仅是行的第一列被四舍五入为其背景颜色。其余的列没有应用pdfptableevent，在最后一页中添加了一个额外的页面。请建议如何解决pdfptableevent的问题，pdfptableevent有许多记录在多个页面中拆分</em
浏览 46提问于2021-02-03得票数 0
我有一个有很多行的HTML表。我有七列。表中的每个单元格(<td>)都有一个ID属性，其中gridx用x和y分别表示列和行。示例<td>为<td id="grid[现在我需要编写一个查询，给出class=为</e
浏览 1提问于2010-08-17得票数 3
回答已采纳
1回答
<td></td>.....我可以从firebug中看到td比"test“div宽约40 of (width+border+margin全部包括在内)，但是没有这样做的css样式(没有设置宽度、填充)！现在，我正在对td to9进行硬编码，它的宽度与“测试”div一样宽，但我感到不舒服。
浏览 4提问于2009-08-20得票数 0
1回答
如何将html表中的行拆分为多个(子)行？(我并不打算使用rowspan来跨越多个行，因为我使用的是名为sync的rails gem，它被限制为一次更新单个表行)。例如，如何在表中创建单个行，即：
在第二列中，被分割为两个子行。在第三列中，将被拆分为4个子行(前一列中的第一行被拆分为2个子行，而前一列中的第2行被<
浏览 4提问于2014-11-02得票数 1
如何在PrimeFaces的分页DataTable中过滤后的结果数？<p:dataTable id="tbl" var="x" value="#{dbBean.xSorted}" paginator="true" rows="20">
<p:column sortBy="#{x.id}" filterBy="#{x.id}"
浏览 0提问于2011-04-01得票数 4
回答已采纳
1回答
在我的NSTableView中，我需要第一列为文本，然后是X数量的复选框列，最后一列为文本。X列数是一个基于从SQLite文件中读取的条目数的变量。我的问题是：
向你问好，伊戈尔
浏览 0提问于2013-01-10得票数 3
回答已采纳
我试图使用html/template在Go中生成一个HTML内容。数据实际上是来自不同SELECT表的MySQL查询的输出。能够生成，但无法拆分行。如何在result := []map[string]interface{}{}上迭代(我使用接口，因为在执行之前列数和它的类型未知)以表格式表示数据？列和行不匹配这里是操场链
浏览 3提问于2022-07-26得票数 0
回答已采纳
是否有人对从谷歌广告数据转移到BigQuery的数据有问题？我已经联系过Google支持，BigQuery专业手机支持，Google团队，他们中的每一个都把我引向了其他人。我希望我可以在这里或谁可以澄清这是否是预期的。我甚至试
浏览 0提问于2018-12-01得票数 2
需要从一个大xml创建许多小表(每个表有不同的列数)，所有这些表都将被合并，或者与特殊字符(如连字符)连接在一起，最终输出一个csv。我的Nifi管道如下。SplitJson
我的方法是像下面这样从xml
浏览 3提问于2019-07-04得票数 0
我正在尝试将表格字符串(如csv)转换为html表格。我的代码可以很好地处理简单的表，但是当它合并行和列时，它就失败了。那么如何在脚本中使用行跨度和列跨度呢？<html ng-app="" ng-controller="myCtrl">table, th, td {
border: 1px solid blackallText
浏览 0提问于2015-12-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
