使用jQuery重构通过嵌套表显示的元素

时间：2016-08-17 16:36:47

标签： jquery dom

我知道有这样的一千个问题，但经过几个小时的阅读和摆弄，我仍然无法做我想做的事情（这可能是第一次做错的事情）位）。

我有一个网站，可以生成这样的页面代码（为清晰起见，清理和简化）：

<div id="sectionFiles">
    <table class="LISTNAMES" border="1" cellpadding="0" cellspacing="0" width="1305">
        <tbody>
            <tr>
                <td align="center"> 

                    <table class="LISTNAMES" border="0" cellpadding="0" cellspacing="0" width="185">
                        <tbody>
                            <tr>
                                <td height="16" align="LEFT" valign="top"><img src="webicon?-16+-T+38425053+-C+3842494D" height="16" border="0" width="16"></td>
                                <td align="left" valign="CENTER"> <span id="inwinstr0" class="SMALLFONT">&nbsp; </span> </td>
                                <td align="RIGHT" valign="top"></td>
                            </tr>
                            <tr height="112">
                                <td colspan="3" height="112" align="CENTER" valign="TOP"> <a href="Cinema%2022%20Red%208oz%20Label.psd"><img id="Cinema%2022%20Red%208oz%20Label.psd" src="Cinema%2022%20Red%208oz%20Label.psd" alt="Display Larger Preview" height="75" border="0" width="112"></a></td>
                            </tr>
                            <tr height="16">
                                <td colspan="3" height="16" align="CENTER" valign="TOP">Cinema 22 Red 8oz Label.psd </td>
                            </tr>
                            <tr height="24">
                                <td colspan="3" align="CENTER" valign="center"> <a href="getimage?-high+-n+-id+4010787+/Cinema%2022%20Red%208oz%20Label.psd"><img class="button" alt="Download Hi-Res File" src="" height="16" align="top" border="0" width="16"></a> <a href="getimage?-fpo+-n+/Cinema%2022%20Red%208oz%20Label.psd"><img class="button" alt="Download Low-Res File" src="" height="16" align="top" border="0" width="16"></a> <a href="imageinfo?/Cinema%2022%20Red%208oz%20Label.psd"><img class="button" onerror="this.src=&quot;&quot;" alt="Info" src="" height="16" align="top" border="0" width="16"></a> <a href="imageorder?/Cinema%2022%20Red%208oz%20Label.psd"><img class="button" alt="Custom order" src="" height="16" align="top" border="0" width="16"></a> <a href="" onclick="window.openBasket(0); return false;" title="Add to basket"></a></td>
                            </tr>
                        </tbody>
                    </table>

                </td>
                <td align="center"> 

                    <table class="LISTNAMES" border="0" cellpadding="0" cellspacing="0" width="185">
                        <tbody>
                            <tr>
                                <td height="16" align="LEFT" valign="top"><img src="webicon?-16+-T+38425053+-C+3842494D" height="16" border="0" width="16"></td>
                                <td align="left" valign="CENTER"> <span id="inwinstr1" class="SMALLFONT">&nbsp; </span> </td>
                                <td align="RIGHT" valign="top"></td>
                            </tr>
                            <tr height="112">
                                <td colspan="3" height="112" align="CENTER" valign="TOP"> <a href="getimage?-web+-id+4010786+/Cinema%2025%20Red%208%20oz%20Label.psd"><img id="previewImg/Cinema%2025%20Red%208%20oz%20Label.psd" src="getimage?-small+-id+4010786+/Cinema%2025%20Red%208%20oz%20Label.psd" alt="Display Larger Preview" height="75" border="0" width="112"></a></td>
                            </tr>
                            <tr height="16">
                                <td colspan="3" height="16" align="CENTER" valign="TOP">Cinema 25 Red 8 oz Label.psd </td>
                            </tr>
                            <tr height="24">
                                <td colspan="3" align="CENTER" valign="center"> <a href="getimage?-high+-n+-id+4010786+/Cinema%2025%20Red%208%20oz%20Label.psd"><img class="button" alt="Download Hi-Res File" src="" height="16" align="top" border="0" width="16"></a> <a href="getimage?-fpo+-n+/Cinema%2025%20Red%208%20oz%20Label.psd"><img class="button" alt="Download Low-Res File" src="" height="16" align="top" border="0" width="16"></a> <a href="imageinfo?/Cinema%2025%20Red%208%20oz%20Label.psd"><img class="button" onerror="this.src=&quot;&quot;" alt="Info" src="" height="16" align="top" border="0" width="16"></a> <a href="imageorder?/Cinema%2025%20Red%208%20oz%20Label.psd"><img class="button" alt="Custom order" src="" height="16" align="top" border="0" width="16"></a> <a href="" onclick="window.openBasket(1); return false;" title="Add to basket"></a></td>
                            </tr>
                        </tbody>
                    </table>

                </td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
    <option value="-1" selected="">All (53) </option>
</div>

包含在父TABLE.LISTNAMES的TD中的每个内部TABLE.LISTNAMES包含我在其自己的TD内所需的所有数据。基本上我想彻底消除表格的使用，用最小级别的TD包含html包含名为DIV的类（例如图标，缩略图，名称，动作），以便在响应式的Bootstrap图库中使用。

我正在尝试做的是：

  1. 创建内部表的数组
  2. 遍历该数组并剥离TDs内部html
  3. 在Bootstrap框架中包含那些结果

    4. 我最终希望为每个内部表的数据实现的输出框架类似于：

    <div class="col-sm-6">
    <div class="thumbnail">
        <a><img><##></img></a><!-- Asset thumbnail image and link -->
        <div class="caption">
            <img><##></img><!-- Asset icon -->
            <h3><##></h3><!-- Asset name -->
            <p><##></p><!-- Whatever else-->
            <p><##></p><!-- Asset actions -->
        </div><!-- /.caption -->
    </div><!-- /.thumbnail -->
</div><!-- /.col-sm-6 -->

    或具体地说：

    <div class="col-sm-6">
    <div class="thumbnail">
        <a href="Cinema%2022%20Red%208oz%20Label.psd">
            <img id="Cinema%2022%20Red%208oz%20Label.psd" src="Cinema%2022%20Red%208oz%20Label.psd" alt="Display Larger Preview" height="75" border="0" width="112">
        </a><!-- Asset thumbnail image and link -->
        <div class="caption">
            <img src="webicon?-16+-T+38425053+-C+3842494D" height="16" border="0" width="16"><!-- Asset icon -->
            <h3>Cinema 22 Red 8oz Label.psd</h3><!-- Asset name -->
            <p>...</p><!-- Whatever else-->
            <p>
                <a href="getimage?-high+-n+-id+4010787+/Cinema%2022%20Red%208oz%20Label.psd">
                    <img class="button" alt="Download Hi-Res File" src="" height="16" align="top" border="0" width="16"></a>
                <a href="getimage?-fpo+-n+/Cinema%2022%20Red%208oz%20Label.psd">
                    <img class="button" alt="Download Low-Res File" src="" height="16" align="top" border="0" width="16"></a>
                <a href="imageinfo?/Cinema%2022%20Red%208oz%20Label.psd">
                    <img class="button" onerror="this.src=&quot;&quot;" alt="Info" src="" height="16" align="top" border="0" width="16"></a>
                <a href="imageorder?/Cinema%2022%20Red%208oz%20Label.psd">
                    <img class="button" alt="Custom order" src="" height="16" align="top" border="0" width="16"></a>
                <a href="" onclick="window.openBasket(0); return false;" title="Add to basket"></a>
            </p><!-- Asset actions -->
        </div><!-- /.caption -->
    </div><!-- /.thumbnail -->
</div><!-- /.col-sm-6 -->

    解 回到基础并更好地理解jQuery如何工作以完成这样的任务......我能够提出以下解决方案。 （这肯定不是最有效的方法，但至少我得到了我正在寻找的结果。）

    // Build key/value object from pre-generated shortdisplay code
var assetTables = $('table.LISTNAMES tbody tr td table').map(function(i, v) {
    var $td =  $('td', this);
    return {
        id: ++i,
        icon: $td.eq(0).html(),
        messageBox: $td.eq(1).html(),
        offline: $td.eq(2).html(),
        preview: $td.eq(3).html(),
        name: $td.eq(4).html(),
        actions: $td.eq(5).html()
    }
}).get();

// Build thumbnail display using object assetTables
for (var i = 0; i < assetTables.length; i++) {
    var myThumbnail = [
        '<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 assetFile" id="assetFile'+i+'">',
        '   <div class="thumbnail">',
        '       <div class="assetPreview">'+assetTables[i].preview+'</div>',
        '       <div class="caption">',
        '           <h3 class="assetTitle">'+assetTables[i].name+'</h3>',
        '           <p class="assetInfo">'+assetTables[i].icon+''+assetTables[i].offline+'</p>',
        '           <p class="assetActions">'+assetTables[i].actions+'</p>',
        '           <p class="assetMessages">'+assetTables[i].messageBox+'</p>',
        '       </div>',
        '   </div>',
        '</div>'
    ];
    $('div#sectionAssetDisplay').append(myThumbnail.join(''));
};

0 个答案:

没有答案
相关问题
最新问题