jquery选择器语法

比如有个一10行3列的table，
用jquery选择出此表格第二列中包含字符串为'testString'的所有行元素tr。
求解答jQueryjavascriptweb

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title></title>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    </head>
    <body>
    <table width="400" border="1" class="tab">
        <tr>
            <td>aaa</td>
            <td>111</td>
        </tr>
        <tr>
            <td>testString</td>
            <td>111</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>111</td>
        </tr>
    </table><script type="text/javascript">
        var tr = $('.tab').find('tr:contains("testString")');
        console.log(tr);
    </script>
    </body>
    </html>
      

  2.   

    楼上的确实能过滤出含有testString的tr，但我只要求第二列中含有testString的字符串。其他列即使含有testString也不要过滤
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    </head><body>
    <table id="table1">
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>testString</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>testString</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22222</td>
    <td>testString</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22testString222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>1testString1111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    </table>
    <script type="text/javascript">
    $("#table1 tr:has(td:eq(1):contains('testString'))").css("background-color","#ffff00");
    </script>
    </body>
    </html>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    </head><body>
    <table id="table1">
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>testString</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>testString</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22222</td>
    <td>testString</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22testString222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>1testString1111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    </table>
    <script type="text/javascript">
    $("#table1 tr:has(td:eq(1):contains('testString'))").css("background-color","#ffff00");
    </script>
    </body>
    </html>
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    </head><body>
    <table id="table1">
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>testString</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>testString</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22222</td>
    <td>testString</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22testString222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>1testString1111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    </table>
    <script type="text/javascript">
    $("#table1 tr:has(td:eq(1):contains('testString'))").css("background-color","#ffff00");
    </script>
    </body>
    </html>
      

  5.   


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){//引用#2 table
    $("#table1 tr").find("td:eq(1):contains('testString')").parents('tr').css("background-color","red");
    });
    </script>
    </head><body>
    <table id="table1">
    <tr>
    <td>11111</td>
    <td>testString</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>testString</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>testString</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22222</td>
    <td>testString</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>testString</td>
    <td>22testString222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    <tr>
    <td>1testString1111</td>
    <td>22222</td>
    <td>33333</td>
    </tr>
    </table>
      

  6.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <TITLE> New Document </TITLE>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    window.onload = function() {
    var columnIndex = 1;
    var str = 'testString'; var $trs = $("#t tr") // 在表格的tr下面找
    .find('td:eq('+columnIndex+')') // 找出第二列的td
    .filter(":contains('"+str+"')") // 第二列td中包含testString的td
    .parent(); // 返回父节点,即tr节点 // $trs就是了tr集合了
    $trs.each(function(){
    // 打印内容检查一下
    alert(this.innerHTML)
    });}
    </script>
    </HEAD><BODY>
    这里应该找出第一行跟第三行的tr<br>
    <TABLE id="t" border="1">
    <TR>
    <TD>1</TD>
    <TD>testString</TD>
    <TD>2</TD>
    </TR>
    <TR>
    <TD>testString</TD>
    <TD>4</TD>
    <TD>5</TD>
    </TR>
    <TR>
    <TD>6</TD>
    <TD>7</TD>
    <TD>8</TD>
    </TR>
    <TR>
    <TD>9</TD>
    <TD>testString</TD>
    <TD>12</TD>
    </TR></TABLE>
    </BODY>
    </HTML>
      

  7.   

    感谢大家，三楼第一个给出满意答案
    7楼的也不错，谢了。看来jquery语法真的很灵活