如何使用jQuery在表單元格值中查找查找值

Question

我有一個表格html代碼，它是通過ajax從源代碼中獲取的，如下所示：

<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">City</td>
        <td class="red">xyz</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Country</td>
        <td class="red">abc</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Date</td>
        <td class="red">05.10.2017</td>
    </tr>
</table>

<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">Category</td>
        <td class="red">This is category</td>
    </tr>
</table>

我想在此html中獲得country值的值。 jQuery nth-child可以找到，但我找不到。 我找到了nht tr項目，但是找不到國家的值（“ abc”）。

Answer 1

不確定要怎么做，但是如果要獲取包含Country的tr的第二個td ，請使用以下$("table tr:contains(Country) td:eq(1)").text()

演示版

 var text = $("table tr:contains(Country) td:eq(1)").text(); console.log(text) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="stripped"> <tr class="red"> <td style="font-weight:bold;">City</td> <td class="red">xyz</td> </tr> <tr class="red"> <td style="font-weight:bold;">Country</td> <td class="red">abc</td> </tr> <tr class="red"> <td style="font-weight:bold;">Date</td> <td class="red">05.10.2017</td> </tr> </table> <table class="stripped"> <tr class="red"> <td style="font-weight:bold;">Category</td> <td class="red">This is category</td> </tr> </table> 

Answer 2

 let country = document.querySelectorAll("tr")[1].querySelectorAll("td")[1].innerText;

 document.querySelectorAll("tr")[1] (second tr)
 .querySelectorAll("td")[1] (second td in second tr)
 .innerText (gets value)

Answer 3

如何跟隨選擇器：

  $( "table.stripped tr:nth-child(2) td:nth-child(2)" ).val();

Answer 4

除nth-child之外，唯一真正的參考點是文本標題。

既然是這種情況，我們可以只在表格單元格中查找標題Date ，然后從以下單元格（該單元格的索引+ 1）中獲取文本。

應該指出，這不是理想的。 如果將來標記價格發生變化，這種解決方案就像我們可以根據情況提供的其他解決方案一樣，很容易被擊敗。 盡管我確實知道有時您別無選擇，但請記住一些注意事項。

 $("td").each(function(ind, ele) { if(ele.textContent === "Date"){ console.log("date is", $("td").eq(ind+1).text() ); }}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="stripped"> <tr class="red"> <td style="font-weight:bold;">City</td> <td class="red">xyz</td> </tr> <tr class="red"> <td style="font-weight:bold;">Country</td> <td class="red">abc</td> </tr> <tr class="red"> <td style="font-weight:bold;">Date</td> <td class="red">05.10.2017</td> </tr> </table> <table class="stripped"> <tr class="red"> <td style="font-weight:bold;">Category</td> <td class="red">This is category</td> </tr> </table> 

Answer 5

代碼： http ： //tpcg.io/Vy9IwJ

<script>
$(document).ready(function() {
    $(".stripped td").get().forEach(function(entry, index, array) {
        if ($(entry).text()=='Country') {
            $('#result').html( $('#result').html()+'Country: '+$(entry).next().text() );
        }
    });
});
</script>
<div id="result">
</div> 
<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">City</td>
        <td class="red">xyz</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Country</td>
        <td class="red">abc</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Date</td>
        <td class="red">05.10.2017</td>
    </tr>
</table>
<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">Category</td>
        <td class="red">This is category</td>
    </tr>
</table>