我如何使用jQuery将HTML表转换为< div>？ [英] How can I use jQuery to convert an HTML table into <div>'s?

问题描述

我怎样才能将HTML表格（我将在下面提供代码）转换为< div> 元素？长话短说，我使用的PHP脚本将内容输出到HTML表格中，并且已经证明编辑PHP并将表格元素转换为< div> 非常困难。的。以下是HTML表格代码：

 < table>< tbody>< tr data-marker =0> ;< td class =mapp-marker>< img class =mapp-iconsrc =http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-  < / td>< td>< b>沃尔玛街市< br& ;获取路线< / 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><< ;> Walmart Express< / b>< a href =＃class =poi_list_directions>获取路线< / a>< / td>< / tr>< tr data-marker =2>< td class =mapp-marker>< img class =mapp-iconsrc =http://www.walmartchicago.com/wp-content/plugins/mappress-google -maps换的WordPress /图标/沃尔玛-red.png& < />< td>< b> Walmart Express< / td>< / b>< a href =＃class =poi_list_directions> ;< / tr>< tr data-marker =3>< td class =mapp-marker>< img class =mapp-iconsrc =http：//www.walmartchicago沃尔玛超级中心< / gt;< / td> >< a href =＃class =poi_list_directions>获取方向< / a>< / td>< / tr>< tr data-marker =4> mapp-marker>< img class =mapp-iconsrc =http://www.walmartchicago.com/wp-content/plugins/mappress-google-maps-for-wordpress/icons/walmart- blue.png>< / td>< td>< b>沃尔玛超级中心< br>< / b>< a href =＃class =poi_list_directions>获取路线< / a> < / TD>< / TR>< / tbody的>< /表> 
  

解决方案

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

  $（'table'）。replaceWith （/< tr / gi，< div id ='table'）
 .replace（/< tbody / 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（）来做同样的事情，只有在输出之前from PHP？

  $ table_str = //表格字符串在这里
 $ 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）; 
  

How could I go about converting an HTML table (I will provide code below) into <div> elements? Long story short, I am using a PHP script that outputs contents into an HTML table and it has proven very difficult to edit the PHP and convert the table elements into <div>'s. Below is the HTML table code:

<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>

解决方案

No need to loop through the elements and copy the attributes, just pull the table contents as a string and run a simple string replace ...

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

... or, if you want an unordered list ...

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

This will also retain your classes and attributes.

Perhaps the best solution isn't jQuery related, but PHP ... you could use PHP's str_replace() to do the same thing, only before outputting from 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);

这篇关于我如何使用jQuery将HTML表转换为< div>？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！