2

JavaScript、jQuery、またはその他の方法tableを使用して HTML 構造を変更する方法はありますか?div

<table cellspacing="0" cellpadding="0" border="1" style="width: 500px; ">
<tbody>
    <tr><td><strong>CONNECTORS</strong></td><td>&nbsp;</td></tr>
    <tr><td>USB:</td><td>AMC</td></tr>
    <tr><td>Gigabit Ethernet:</td><td>AMC</td></tr> 
    <tr><td>VGA:</td><td>AMC</td></tr>
    <tr><td>RS232:</td><td>AMC</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;   </td></tr>
    <tr><td><strong>PHYSICAL CHARACTERISTICS</strong></td><td>&nbsp;</td></tr>
    <tr><td>Dimensions:</td><td>220 x 88 x 280mm (WxHxD)</td></tr>
    <tr><td>Weight:</td><td>4,6kg</td></tr>
    <tr><td>Color:</td><td> Green, other optional</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;   </td></tr>
</tbody>

したがって、ハック後は次のようになります。

<div style="width:500px">
    <div class="block"> 
        <div><strong>CONNECTORS</strong></div>
        <div class="lft">USB:</div><div class="rght">AMC</div>
        <div class="lft">Gigabit Eithernet</div><div class="rght">AMC</div>    
        <div class="lft">VGA:</div><div class="rght">AMC</div>   
        <div class="lft">RS232:</div><div class="rght">AMC</div>             
    </div>

    <div class="block"> 
        <div><strong>PHYSICAL CHARACTERS</strong></div>
        <div class="lft">Dimensions</div><div class="rght">220 x 88 x 280mm (WxHxD)</div>
        <div class="lft">weight:</div><div class="rght">AMC</div>    
        <div class="lft">Color:</div><div class="rght">AMC</div>   
        <div class="lft">power:</div><div class="rght">9-32VDC</div>             
    </div>  
</div>
4

1 に答える 1

0

良いアイデアかどうかはわかりませんが、そのようなことができます。

次のようなテーブルの周りにラッパーがある場合：

<div id="wrapper">
    <table>
        <tbody>
            <tr><td><strong>CONNECTORS</strong></td><td>&nbsp;</td></tr>
            <tr><td>USB:</td><td>AMC</td></tr>
            <tr><td>Gigabit Ethernet:</td><td>AMC</td></tr>
            ...
        </tbody>
    </table>
</div>

それで：

var content = $('#wrapper').html().replace(/table/g, 'div').replace(/tbody/g, 'div').replace(/tr><td/g, 'div').replace(/td><\/tr/g, 'div');

$('#wrapper').html(content);

私の例は、アイデアを提供するためのものです。単一の正規表現と単一の replace() で実現できます。

デモ：JSFIDDLE

編集: HTML がデータベースに保存されている場合は、データベースに直接置き換えることができます。

SQL Server の例:

UPDATE myDatabase SET html = REPLACE(html, 'table', 'div') WHERE html LIKE '%table%';
UPDATE myDatabase SET html = REPLACE(html, 'tbody', 'div') WHERE html LIKE '%tbody%';
...

そのデータベースが本番環境にある場合は、クエリを確認する必要があります。

于 2013-09-18T10:02:44.960 に答える