如何使用jQuery将HTML表格转换为<div>标签？

Question

如何使用jQuery将HTML表格转换为<div>标签？

4

我该如何将一个HTML表格（我将提供下面的代码）转换为<div>元素？简而言之，我正在使用一个PHP脚本将内容输出到HTML表格中，但是编辑PHP并将表格元素转换为<div>非常困难。以下是HTML表格代码：

<table><tbody><tr data-marker="0"><td class="mapp-marker"><img class="mapp-icon" src="http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-wordpress/icons/walmart-yellow.png"></td><td><b>Walmart Neighborhood Market<br></b><a href="#" class="poi_list_directions">Get Directions</a></td></tr><tr data-marker="1"><td class="mapp-marker"><img class="mapp-icon" src="http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-wordpress/icons/walmart-red.png"></td><td><b>Walmart Express<br></b><a href="#" class="poi_list_directions">Get Directions</a></td></tr><tr data-marker="2"><td class="mapp-marker"><img class="mapp-icon" src="http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-wordpress/icons/walmart-red.png"></td><td><b>Walmart Express<br></b><a href="#" class="poi_list_directions">Get Directions</a></td></tr><tr data-marker="3"><td class="mapp-marker"><img class="mapp-icon" src="http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-wordpress/icons/walmart-blue.png"></td><td><b>Walmart Supercenter<br></b><a href="#" class="poi_list_directions">Get Directions</a></td></tr><tr data-marker="4"><td class="mapp-marker"><img class="mapp-icon" src="http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-wordpress/icons/walmart-blue.png"></td><td><b>Walmart Supercenter<br></b><a href="#" class="poi_list_directions">Get Directions</a></td></tr></tbody></table>

- Alexa Green

1

尽管编辑PHP以生成div中的内容可能很困难，但这很可能是在此处使用的最佳方法。 - Rory McCrossan

虽然我的答案将为您提供所请求的jQuery解决方案。也许最好的解决方案是在从PHP输出字符串之前执行我刚刚做的操作？ - Timothy Aaron

3个回答

4

这似乎是一件疯狂的事情。但我刚刚编写了一个jQuery插件来完成这个操作。我们正在使用一个老旧的Web应用程序，不希望深入挖掘后端代码，并且预算有限。因此，只需取出以表格形式转储的数据，将其转换为div，使其可以浮动，进行样式设置并使数据更加美观。

系统呈现的数据实际上不是“表格”数据。

https://github.com/ryandoom/jquery-plugin-table-to-div

如果有人对未来感兴趣。

- Ryan Doom

1

长话短说，我正在使用一个PHP脚本将内容输出到HTML表格中，但是编辑PHP并将表格元素转换为

非常困难。

对于非表格内容使用表格是不被赞同的。然而，如果您已经在表格中提供了内容，并且它看起来很好，您应该不使用jQuery将表格转换为div，只是为了摆脱表格。

如果您仍然想使用jQuery将表格转换为div，则必须考虑

元素的结构。然后，循环遍历每个表格行，循环遍历每个表格单元格，并将内容移动到新创建的

中。最后，用一组

替换表格。

- Rob W

一个带样式的无序列表将是这种类型内容的适当容器。您可以使用CSS背景来标记LI。 - Diodeus - James MacFarlane

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Timothy Aaron · Accepted Answer

不需要遍历元素并复制属性，只需将表格内容作为字符串提取出来，然后运行简单的字符串替换操作即可...

$('table').replaceWith( $('table').html()
   .replace(/<tbody/gi, "<div id='table'")
   .replace(/<tr/gi, "<div")
   .replace(/<\/tr>/gi, "</div>")
   .replace(/<td/gi, "<span")
   .replace(/<\/td>/gi, "</span>")
   .replace(/<\/tbody/gi, "<\/div")
);

... 或者，如果您想要一个无序列表 ...

$('table').replaceWith( $('table').html()
   .replace(/<tbody/gi, "<ul id='table'")
   .replace(/<tr/gi, "<li")
   .replace(/<\/tr>/gi, "</li>")
   .replace(/<td/gi, "<span")
   .replace(/<\/td>/gi, "</span>")
   .replace(/<\/tbody/gi, "<\/ul")
);

这样可以保留您的类和属性。

也许最好的解决方案与jQuery无关，而是使用PHP...您可以使用PHP的str_replace()完成相同的操作，只是在从PHP输出之前？

$table_str = //table string here
$UL_str = str_replace('<tbody', '<ul id="table"', $table_str);
$UL_str = str_replace('<tr', '<li', $UL_str);
$UL_str = str_replace('</tr', '</li', $UL_str);
$UL_str = str_replace('<td', '<span', $UL_str);
$UL_str = str_replace('</td', '</span', $UL_str);
$UL_str = str_replace('</tbody', '</ul"', $UL_str);