Question

我怎样才能将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>

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并将表格元素转换为非常困难。

不赞成使用表格来表示非表格内容。但是，如果您已经在表格中提供内容，并且看起来很好，那么您应该不使用jQuery来转换div中的表格，只是为了摆脱桌面。

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

的集合

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

3 个答案: