jQuery从html表获取值 | jQuery从html表获取值

本文介绍了jQuery从html表获取值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用JQuery从动态表中提取数据，但是我尝试过的每种方式都将值转换为其他值(下面的代码将返回"l"，而不是N/AI所期望的.我有尝试使用.each和.map以及.val .html作为函数，并且您可以看到.text来提取数据.我被困在错误原因和原因上.任何帮助将不胜感激./p>

HTML

 < table id ="attendees" class ="attendees">< thead>< tr style ="border-bottom:double; border-color:#007fff"; =">< th>全名</th><会员类型</th><会员有效期限</th;< th>免费凭证</th>< th来自剩余包的类</th>< th> Yelp Check in</th>< th>付款选项</th>< th>删除</th></tr></thead>< tbody>< tr class ="data">< td>学生姓名</td>< td> N/A< td>< td> N/A< td>< td> 0lt//td>< td> 0lt//td>< td>是</td>< td>< ul id ="list"><选择id =付款" name =付款">< option>现金/信用卡</option>< option>免费凭证</option>< option> Yelp签入</option></select></ul></td>< td>< div>< a href =#" class ="remove">< p>删除</p></a></div></td></tr></tbody></table>

JQuery

  $(#submit").live('click'，函数(e){$(#attendees tr.data").map(function(index，elem){var x = $(this);var cells = x.find('td');var $ data = cells.text();//alert($ data [1]);如果($ data [1] =="N/A"){alert(true);}});e.preventDefault();});

最终解决方案

首先，感谢所有参与的人，老实说，我从每个人的答案中学到了一些东西.最后，这就是我在下面确定的内容.事后看来，我可能应该对自己要完成的工作进行更全面的描述.这是要扫描多行数据，然后根据每行中的信息执行某些操作.为此，我不得不将 tr 和 td .each 函数分开.这使我可以逐行扫描并仍然获取单个数据.
再次感谢大家的帮助，尤其是@TechHunter

  $(#submit").on('click'，函数(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);});如果($ data [1] =="N/A"){做一点事();}});});

解决方案

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

HTML

 <表id =与会者" class =与会者">< thead>< tr style ="border-bottom:double; border-color:#007fff"; =">< th>全名</th><会员类型</th><会员有效期限</th;< th>免费凭证</th>< th来自剩余包的类</th>< th> Yelp Check in</th>< th>付款选项</th>< th>删除</th></tr></thead>< tbody>< tr class ="data">< td class ="inputValue">学生姓名</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">是</td>< td>< ul id ="list"><选择id =付款" class ="inputValue"名称=付款">< option>现金/信用卡</option>< option>免费凭证</option>< option> Yelp签入</option></select></ul></td>< td>< div>< a href =#" class ="remove">< p>删除</p></a></div></td></tr></tbody></table>

JavaScript

  $(#submit").on('click'，函数(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);如果(d =="N/A"){console.log(true);}});返回ret});console.log(data);console.log(data [0]);});

它更容易，您只检索要检索的值.快速实施和维护.

在此处拨弄

I am attempting to pull data from a dynamic table using JQuery, but every way I've tried turns the values into something else (the below code will return an "l" instead of the N/A I was expecting. I have tried using .each and .map as the function as well as .val .html and as you can see .text to pull the data. I am stuck as to why and what I am doing wrong. Any help would be greatly appreciated.

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

        });

Final Solution

Thanks first of all to everyone who chimed in, I honestly learned a little something from each persons answer. In the end this is what I settled on below. In hindsight I probably should of given a more thorough description on what I was attempting to accomplish. Which was to scan multiple rows of data and do something based on the info found in each row. To accomplish this I was forced to separate the tr and td .each functions. This allowed me to scan row by row and still get the individual data.
Thanks again for everyone's help especially @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();
        }
    });
});

解决方案

Simplest answer would be to add a class when you need to retrieve a value :

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

It's easier and you only retrieve value you want to retrieve. Fast to implement and to maintain.

Fiddle here

这篇关于jQuery从html表获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！