JQuery从HTML表格获取值

Question

我尝试使用JQuery从动态表中提取数据，但我尝试的每种方法都会将值转换为其他内容（下面的代码将返回“l”，而不是我预期的N/A）。我尝试使用.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(); 
        }
    });
});

- Steve Beaty

Answer 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]);
});

这种方法更加简便，你仅仅能够检索到你想要的数值。而且实现和维护的速度也很快。

点此查看演示

- TecHunter

---

谢谢，我喜欢你简单的方法。不过为了获取下拉列表的值，我不得不使用:selected，例如var $data = $("option:selected", this).val()||$(this).text(); 现在我的问题是，当我尝试从变量中访问每个单独的值，例如data[0]，我只得到第一个字符。这当然对if语句没有帮助。 - Steve Beaty

@SteveBeaty 您不需要检索 :selected，因为 .val() 函数已经为您完成了。抱歉我完全忽略了您在这里关于数据的观点，请查看我的更新。 - TecHunter

嘿 @TecHunter，请检查我对原帖的编辑。没有你的帮助，我不可能做到这一步。虽然我必须在代码中保留 option:selected，表面上我理解为什么我不需要它，但老实说，如果没有它，它就无法正常工作。也许是个bug... 无论如何，再次感谢你的帮助。 - Steve Beaty

@SteveBeaty 哦，好的，你应该至少接受某人的答案并投票表示每个帖子都对你有所帮助。感谢帮助。 - TecHunter

Answer 2

如果您的 JQuery 版本支持，应该使用 on() 代替 live() (原因请参见链接)。只需稍微修改您的 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())
     }

点击这里查看演示 :- FIDDLE（更新后的演示，显示在 selectbox 中选择的值）

- qwerty

---

除了下拉框单元格返回的是 HTML 而不是值之外，一切都正常。有什么建议吗？ - Steve Beaty

出于可用性考虑，我能建议使用 console.log() 而不是 alert() 吗？（有很多警报被触发了...） - David Thomas

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

@TecHunter 请查看我的回复。顺便说一下，对于那一部分，我不得不使用 var $data = $("option:selected", this).val()||$(this).text(); - Steve Beaty

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

Answer 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();

- tymeJV

---

谢谢您的回复，这个方法大部分都有效，但是带有下拉列表的单元格返回了所有选项，而不是所选择的一个。 - Steve Beaty