JQuery 从 html 表中获取值

Posted 2023-03-05

【中文标题】JQuery 从 html 表中获取值

【英文标题】：JQuery get values from html table

【发布时间】：2013-05-24 04:56:17

【问题描述】：

我正在尝试使用 JQuery 从动态表中提取数据，但我尝试过的每一种方法都会将值转换为其他值（下面的代码将返回一个“l”而不是 N/AI 所期望的。我有尝试使用 .each 和 .map 作为函数以及 .val .html 并且您可以看到 .text 来提取数据。我不知道为什么以及我做错了什么。任何帮助将不胜感激。

HTML

    <table id="attendees" class="attendees">
    <thead>
        <tr style="border-bottom: double;border-color: #007fff" ;="">
            <th>Full Name</th>
            <th>Membership Type</th>
            <th>Membership Expiration Date</th>
            <th>Free Vouchers</th>
            <th>Classes From Pack Remaining</th>
            <th>Yelp Check in</th>
            <th>Payment Option</th>
            <th>Remove</th>
        </tr>
    </thead>
    <tbody>
        <tr class="data">
            <td>Students Name</td>
            <td>N/A</td>
            <td>N/A</td>
            <td>0</td>
            <td>0</td>
            <td>Yes</td>
            <td>
                <ul id="list">
                    <select id="payment" name="payment">
                        <option>Cash/Credit</option>
                        <option>Free Voucher</option>
                        <option>Yelp Check-in</option>
                    </select>
                </ul>
            </td>
            <td>
                <div><a href="#" class="remove"><p>Remove</p></a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

JQuery

$("#submit").live('click', function (e) 
           $("#attendees tr.data").map(function (index, elem) 
               var x = $(this);
               var cells = x.find('td');
               var $data = cells.text();
               //alert($data[1]);
                if ($data[1] == "N/A") 
                alert(true);    
               

          );
            e.preventDefault();

        );

最终解决方案

首先感谢所有加入的人，老实说，我从每个人的回答中学到了一些东西。最后，这就是我在下面确定的。事后看来，我可能应该对我试图完成的事情进行更全面的描述。这是扫描多行数据并根据每行中找到的信息做一些事情。为了做到这一点，我不得不将tr 和td .each 函数分开。这使我可以逐行扫描并仍然获得单个数据。 再次感谢大家的帮助，尤其是@TechHunter

$("#submit").on('click', function (e) 
    e.preventDefault();

    $("#attendees tbody tr").each(function(i) 
    var $data= [];
    var x = $(this);
    var cells = x.find('td');
    $(cells).each(function(i) 
    var $d= $("option:selected", this).val()||$(this).text();
    $data.push($d);
    );      
        if ($data[1] == "N/A") 
           doSomething(); 
        
    );
);

【参考方案1】：

最简单的答案是在需要检索值时添加一个类：

HTML

<table id="attendees" class="attendees">
    <thead>
        <tr style="border-bottom: double;border-color: #007fff" ;="">
            <th>Full Name</th>
            <th>Membership Type</th>
            <th>Membership Expiration Date</th>
            <th>Free Vouchers</th>
            <th>Classes From Pack Remaining</th>
            <th>Yelp Check in</th>
            <th>Payment Option</th>
            <th>Remove</th>
        </tr>
    </thead>
    <tbody>
        <tr class="data">
            <td class="inputValue">Students Name</td>
            <td class="inputValue">N/A</td>
            <td class="inputValue">N/A</td>
            <td class="inputValue">0</td>
            <td class="inputValue">0</td>
            <td class="inputValue">Yes</td>
            <td>
                <ul id="list">
                    <select id="payment" class="inputValue" name="payment">
                        <option>Cash/Credit</option>
                        <option>Free Voucher</option>
                        <option>Yelp Check-in</option>
                    </select>
                </ul>
            </td>
            <td>
                <div><a href="#" class="remove"><p>Remove</p></a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Javascript

$("#submit").on('click', function (e) 
    e.preventDefault();
    var data = $("#attendees tr.data").map(function (index, elem) 
        var ret = [];
        $('.inputValue', this).each(function () 
            var d = $(this).val()||$(this).text();
            ret.push(d);
            console.log(d);
            if (d == "N/A") 
                console.log(true);
            
        );
        return ret;
    );
    console.log(data);
    console.log(data[0]);
);

这更容易，您只检索想要检索的值。快速实施和维护。

Fiddle here

【讨论】：

谢谢，我喜欢你简单的方法。虽然要获得下拉列表的值，但我必须使用 :selected ，如 var $data = $("option:selected", this).val()||$(this).text();我现在遇到的问题是，当我尝试像在 data[0] 中那样从 var 访问每个单独的值时，我只得到返回的第一个字符。这当然对 if 语句没有帮助

@SteveBeaty 您不需要检索:selected，因为.val() 函数已经为您完成了。抱歉，我完全错过了您对此处数据的看法，请查看我的更新

嘿@TecHunter 检查我对原始帖子的编辑。没有你的意见，我不可能走得那么远。虽然我不得不保留选项：在代码中选择，但从表面上看，我理解为什么我不应该需要它，但老实说，没有它它就无法工作。也许是一个错误......无论如何，再次感谢您的帮助。

@SteveBeaty 哦，好吧，您至少应该接受某人的回答，并投票给每个帖子对您有帮助。 np 寻求帮助

【参考方案2】：

您应该使用on() 代替live() （如果您的JQuery 版本支持的话） REASON 。像这样稍微修改一下你的 jquery 就可以了 :

JQuery-

$("#submit").on('click', function (e) 

       $("#attendees tr.data").map(function (index, elem) 
           $(this).find('td').each(function()
           var $data = $(this).html();
           alert($data);
            if ($data == "N/A") 
            alert(true);    
           
        );
      );
        e.preventDefault();

    );

更新：-

只需检查 td 中是否有选择框。如果是，则可以得到如下图：

if($(this).find("select").length > 0)
     
         alert("found select")
         alert($(this).find("select").val())
     

Demo here :- FIDDLE（更新后的显示在选择框中选择的值）

【讨论】：

一切正常，除了带有下拉框的单元格返回为 html 而不是值。有什么建议吗？

仅出于可用性目的，我是否可以建议使用console.log() 而不是alert()（有很多 个警报被触发...）？

@SteveBeaty 使用.val() 而不是.text()，但也要检查我的答案

@TecHunter 请查看我对您的回答的回复，顺便说一下，我不得不使用 var $data = $("option:selected", this).val()|| $(this).text();

@SteveBeaty 您还可以在遍历时检查td 中是否有任何selectbox。如果是，您可以轻松地从中获取所选值。检查更新的答案。

【参考方案3】：

有几件事，假设您使用的是最新版本的 jQuery，您将希望将 live() 替换为 on()。

此外，您需要遍历您的单元格以找到您要查找的内容，只是将其放入变量中是行不通的。

$(document).on('click', '#submit' function (e) 
    e.preventDefault();

    //time to iterate over the cells
    $("#attendees tr.data td").each(function(i) 
        if ($(this).text() == "N/A") 
            alert("Found it on cell index: " +i);
        
    );
);

如果你想使用.map() 来返回td 文本的数组，你可以这样做：

var tdArray = $("#attendees tr.data td").map(function() 
    return $(this).text();
).get();

【讨论】：

感谢您的回复，这在大多数情况下都有效，但带有下拉列表的单元格返回了所有选项，而不是选择的选项