javascript - 通过使用子句查找内容来删除表行

Question

我有这个代码:

<table>
    <tbody>
        <tr><td>Table 1</td></tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr>
            <td align="left">Number</td>
            <td><b>33</b></td>     
        </tr>
        <tr>        
            <td width="150" align="left">Field</td>
            <td>XXXX</td>
        </tr>
        <tr>    
            <td align="left">Select: </td>
            <td colspan="4">
                <select name="status" size="1">
                    <option selected="selected" value="2">one</option>
                    <option value="1">two</option>
                </select>                   
            </td>
        </tr>
    </tbody>
</table>

我想通过使用纯 Javascript 搜索“Field”来删除此行:

    <tr>
        <td width="150" align="left">Field</td>
        <td>XXXX</td>
    </tr>

当我的第二个表中的这一行有 33、66 或 99 时:

    <tr>
        <td align="left">Number</td>
        <td>33</td>     
    </tr>

问题是我没有任何 id 或类用于识别!我想将代码与 Greasemonkey 一起使用。

在这里你可以看到一个JSFIDDLE 我的 table 。
在这里您可以看到 JSFIDDLE 它应该是什么样子。

最诚挚的问候伯恩特

Answer 1

给你:

var disallowedValues = ['33', '66', '99'];    
var cols = document.getElementsByTagName('td');
var colslen = cols.length;
var i = -1;
var disallowedTable;

while(++i < colslen){
    // look for the td where the disallowed values are
    if(disallowedValues.indexOf(cols[i].innerHTML) >= 0)
    {
        // get the table where the disallowed values is
        disallowedTable = cols[i].parentNode.parentNode.parentNode;
        // break the cicle to stop looking for other rows
        //break;
    }
}

// look for the 'Field' value only on the table that has the disallowed value
var cols = disallowedTable.getElementsByTagName('td');
cols = disallowedTable.getElementsByTagName('td');
colslen = cols.length;
i = -1;

while(++i < colslen){
    // look for the td where the 'Field' value is
    if(cols[i].innerHTML == 'Field')
    {
       // get the tr for such td
        var deletionTR = cols[i].parentNode;       
        //delete that tr
        deletionTR.parentNode.removeChild(deletionTR);
        // break the cicle to stop looking for other rows
        break;
    }
}

如果可以选择 jquery，您总是可以做一个更简单的版本。