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

Question

如何将 HTML 表格（我将在下面提供代码）转换为 <div> 元素？长话短说，我正在使用将内容输出到 HTML 表格中的 PHP 脚本，事实证明，编辑 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>

Answer 1

无需循环遍历元素和复制属性，只需将表格内容拉为字符串并运行简单的字符串替换...

$('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);

Answer 2

这似乎是一件很疯狂的事情。我只是写了一个jQuery插件来做到这一点。使用旧的 Web 应用程序，我们不想真正深入研究后端代码并且预算有限。因此，只需将转储到表格中的数据转换为 div，这样我就可以将它们浮动、样式化并使数据看起来更好。

系统正在渲染并非真正“表格”数据的数据。

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

如果有人对未来感兴趣。

Answer 3

长话短说，我正在使用一个将内容输出到 HTML 表格中的 PHP 脚本，事实证明，编辑 PHP 并将表格元素转换为 's 非常困难。

不赞成将表格用于非表格内容。但是，如果您已经在表格中提供了内容，并且看起来不错，那么您应该不使用 jQuery 在 div 中翻转表格，只是为了摆脱表格。

如果你还想用jQuery在一个div中翻表，你必须考虑<div>元素的结构。然后，遍历每个表格行，遍历每个表格单元格，并将内容移动到新创建的<div>。最后将表格替换为<div>s的集合。