Javascript 使用表格宽度 td 过滤 HTML 内容

Question

所以我得到了一堆动态生成的表格，并且无法从原始位置更改，我的问题是:使用 JavaScript 或任何客户端语言，我可以按我正在查找的宽度 = 154 的表格进行过滤为了？

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="154" class="themesdivider">
            <img src="/static/images/all/spacer.gif" alt="" width="154" height="1" border="0">
        </td>
        <td width="9">
            <img src="/static/images/all/spacer.gif" alt="" width="9" height="1" border="0">
        </td>
        <td width="154" class="themesdivider">
            <img src="/static/images/all/spacer.gif" alt="" width="154" height="1" border="0">
        </td>
        <td width="9">
            <img src="/static/images/all/spacer.gif" alt="" width="9" height="1" border="0">
        </td>
        <td width="154" class="themesdivider">
            <img src="/static/images/all/spacer.gif" alt="" width="154" height="1" border="0">
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="/static/images/all/spacer.gif" alt="" width="10" height="2" border="0">
        </td>
    </tr>
    <tr>
        <td width="154" valign="top" align="left"><a href="/nf/Book/BookDisplay/0,,9780241957110,00.html" target='_top'>
    <img src='/static/covers/all/0/1/9780241957110L.jpg' alt='This Is A Book' width=105 border=0></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width=1 height=8>
            <br> <a href='/nf/Book/BookDisplay/0,,9780241957110,00.html' target='_top' class=themebooktitle><font color=>This Is A Book</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <a href='/nf/Author/AuthorPage/0,,0_1000081296,00.html?sym=BIO' target='_top' class=themeauthor><font color=>Demetri Martin</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <a href="/nf/Book/BookDisplay/0,,9780241957110,00.html" target='_top' class='thememore' onmouseover='javascript:document.images.a9780241957110.src="/static/images/all/more_arrow1.gif";' onmouseout='javascript:document.images.a9780241957110.src="/static/images/all/more_arrow.gif";'><img src='/static/images/all/more_arrow.gif' alt='' width=18 height=8 border=0 name='a9780241957110'><font color=>Read more...</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <span class='themebookprice'><font color=>&#163;9.99</font></span>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <a href="/nf/Ecommerce/ShoppingCartChange?item=9780241957110" class=themeaddbasket><img src='/static/images/uk/addto_basket.gif' alt=''><img src='/static/images/all/spacer.gif' alt='' width='5' height='1'><font color=>Buy now</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br>
            <br>
        </td>
        <td width="9">
            <img src="/static/images/all/spacer.gif" alt="" width="9" height="1" border="0">
        </td>
        <td width="154" valign="top" align="left"><a href="/nf/Book/BookDisplay/0,,9780241951774,00.html" target='_top'>
    <img src='/static/covers/all/4/7/9780241951774L.jpg' alt='A History of the World in 100 Objects' width=105 border=0></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width=1 height=8>
            <br> <a href='/nf/Book/BookDisplay/0,,9780241951774,00.html' target='_top' class=themebooktitle><font color=>A History of the World in 100 Objects</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <a href='/nf/Author/AuthorPage/0,,0_1000079074,00.html?sym=BIO' target='_top' class=themeauthor><font color=>Neil MacGregor</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <a href="/nf/Book/BookDisplay/0,,9780241951774,00.html" target='_top' class='thememore' onmouseover='javascript:document.images.a9780241951774.src="/static/images/all/more_arrow1.gif";' onmouseout='javascript:document.images.a9780241951774.src="/static/images/all/more_arrow.gif";'><img src='/static/images/all/more_arrow.gif' alt='' width=18 height=8 border=0 name='a9780241951774'><font color=>Read more...</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <span class='themebookprice'><font color=>&#163;9.99</font></span>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <a href="/nf/Ecommerce/ShoppingCartChange?item=9780241951774" class=themeaddbasket><img src='/static/images/uk/addto_basket.gif' alt=''><img src='/static/images/all/spacer.gif' alt='' width='5' height='1'><font color=>Buy now</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br>
            <br>
        </td>
        <td width="9">
            <img src="/static/images/all/spacer.gif" alt="" width="9" height="1" border="0">
        </td>
        <td width="154" valign="top" align="left"><a href="/nf/Book/BookDisplay/0,,9780141033570,00.html" target='_top'>
    <img src='/static/covers/uk/9780141033570L.jpg' alt='Thinking, Fast and Slow' width=105 border=0></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width=1 height=8>
            <br> <a href='/nf/Book/BookDisplay/0,,9780141033570,00.html' target='_top' class=themebooktitle><font color=>Thinking, Fast and Slow</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <a href='/nf/Author/AuthorPage/0,,0_1000081748,00.html?sym=BIO' target='_top' class=themeauthor><font color=>Daniel Kahneman</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <a href="/nf/Book/BookDisplay/0,,9780141033570,00.html" target='_top' class='thememore' onmouseover='javascript:document.images.a9780141033570.src="/static/images/all/more_arrow1.gif";' onmouseout='javascript:document.images.a9780141033570.src="/static/images/all/more_arrow.gif";'><img src='/static/images/all/more_arrow.gif' alt='' width=18 height=8 border=0 name='a9780141033570'><font color=>Read more...</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <span class='themebookprice'><font color=>&#163;8.99</font></span>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br> <a href="/nf/Ecommerce/ShoppingCartChange?item=9780141033570" class=themeaddbasket><img src='/static/images/uk/addto_basket.gif' alt=''><img src='/static/images/all/spacer.gif' alt='' width='5' height='1'><font color=>Buy now</font></a>
            <br>
            <img src='/static/images/all/spacer.gif' alt='' width='1' height='5' border='0'>
            <br>
            <br>
        </td>
    </tr>
</table>

Answer 1

您可以使用过滤器:

var $tds = $('table td').filter(function() {
    return $(this).width() == 154;
});

或者你可以直接查看属性值:

var $tds = $('table td').filter(function() {
    return $(this).attr('width') == '154';
});

或者甚至使用单个选择器:

$('table td[width="154"]');

我认为后两个选项会更可靠，因为不同浏览器的边距/填充存在差异。