代码之家  ›  专栏  ›  技术社区  ›  barteloma

如何使用jquery在表单元格值中查找值

  •  0
  • barteloma  · 技术社区  · 7 年前

    我有一个通过ajax从源代码中获取的表格html代码,如下所示:

    <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>
    

    我想得到的价值 country 此html中的值。第n个孩子能找到,但我找不到。我发现 nht tr 项目,但无法找到国家/地区的价值(“abc”)。

    5 回复  |  直到 7 年前
        1
  •  2
  •   Carsten Løvbo Andersen Dan Nemtanu    7 年前

    不知道你想用它做什么,但如果你想得到第二个 td tr 包含 Country ,请使用以下命令 $("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>
        2
  •  0
  •   exeraph    7 年前
     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)
    
        3
  •  0
  •   Marta G.    7 年前

    以下选择器如何:

      $( "table.stripped tr:nth-child(2) td:nth-child(2)" ).val();
    
        4
  •  0
  •   zfrisch    7 年前

    唯一真正的参考点 nth-child 是您的文本标题。

    既然是这种情况,我们可以在表格单元格中查找标题 日期 然后从以下单元格中获取文本(该单元格的索引+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>
        5
  •  0
  •   Ricardo Padua Soares    7 年前

    代码: 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>