3

JQueryを使用して動的テーブルからデータを取得しようとしていますが、試したすべての方法で値が別のものに変わります（以下のコードは、N / AIが期待していたのではなく「l」を返します。.関数としての 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(); 
        }
    });
});
4

3 に答える 3

3

最も簡単な答えは、値を取得する必要があるときにクラスを追加することです。

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

簡単で、取得したい値のみを取得します。迅速な実装と維持。

ここでフィドル

于 2013-05-29T07:07:23.410 に答える
1

(JQuery のバージョンでサポートされている場合) REASONon()の代わりに使用する必要があります。このようにjqueryを少し変更しただけでうまくいきました：live()

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 (選択ボックスで選択された値を示す更新されたもの)

于 2013-05-29T04:17:06.867 に答える
0

最近のバージョンの 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();
于 2013-05-29T04:06:31.777 に答える