如何從具有data-id屬性的表行中獲取數據？

Question

我有html表格：

<table data-role="table" data-mode="columntoggle:none" class="ui-responsive ui-table">
    <thead>
        <tr></tr>
    </thead>
    <tbody>
        <tr>
            <td style="vertical-align: inherit;text-align:center;">
                <label for="">...</label>
            </td>
            <td style="text-align:center;">
                <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
                    <input type="text" id="propFieldName" value="..">
                    </div>
                </td>
            </tr>
                <tr data-id="">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">numerItem</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>001</span>
                            <select>
                                <option value="">001</option>
                                <option value="">002</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr data-id="5075">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">diametr</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>6</span>
                            <select>
                                <option value="">3</option>
                                <option value="">4</option>
                                <option value="">6</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr data-id="5076">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">multi</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-49-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>no</span>
                            <select>
                                <option value="">yes</option>
                                <option value="">no</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table> 

當我單擊某個按鈕時，我需要獲取數據表中具有data-id屬性和span元素內的文本的所有行。

例如，根據上表，單擊后的期望結果是：

[{ "id":"5075", "value":6 },{ "id":"5076", "value":"no" }]

我的問題是如何從具有data-id屬性和值（即值不為空）的表中僅獲取行，以及如何從這些行的跨度中獲取文本？

Answer 1

您可以使用具有屬性選擇器[name]來將屬性與:not()關聯的TR定位為目標，以排除空值。

然后.map()獲得本機數組。

var arr = $('tr[data-id]:not([data-id=""])').map(function() {
  return {
    id: $(this).data('id'),
    value: $(this).find('span').text()
  };
}).get();

 var arr = $('tr[data-id]:not([data-id=""])').map(function() { return { id: $(this).data('id'), value: $(this).find('span').text() }; }).get(); console.log(arr) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table data-role="table" data-mode="columntoggle:none" class="ui-responsive ui-table"> <thead> <tr></tr> </thead> <tbody> <tr> <td style="vertical-align: inherit;text-align:center;"> <label for="">...</label> </td> <td style="text-align:center;"> <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"> <input type="text" id="propFieldName" value=".."> </div> </td> </tr> <tr data-id=""> <td style="vertical-align: inherit;text-align:center;"> <label for="">numerItem</label> </td> <td style="text-align:center;"> <div class="ui-select"> <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"> <span>001</span> <select> <option value="">001</option> <option value="">002</option> </select> </div> </div> </td> </tr> <tr data-id="5075"> <td style="vertical-align: inherit;text-align:center;"> <label for="">diametr</label> </td> <td style="text-align:center;"> <div class="ui-select"> <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"> <span>6</span> <select> <option value="">3</option> <option value="">4</option> <option value="">6</option> </select> </div> </div> </td> </tr> <tr data-id="5076"> <td style="vertical-align: inherit;text-align:center;"> <label for="">multi</label> </td> <td style="text-align:center;"> <div class="ui-select"> <div id="select-49-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"> <span>no</span> <select> <option value="">yes</option> <option value="">no</option> </select> </div> </div> </td> </tr> </tbody> </table> 

Answer 2

 function btnClick() { const data = []; const $rows = $("#table tr[data-id]"); for (let i = 0; i < $rows.length; i++) { let obj = {}; const $row = $($rows[i]); obj["id"] = $row.data("id"); obj["value"] = $row.find('span').text(); data.push(obj); } console.log(data) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table data-role="table" data-mode="columntoggle:none" class="ui-responsive ui-table" id="table"> <thead> <tr></tr> </thead> <tbody> <tr> <td style="vertical-align: inherit;text-align:center;"> <label for="">...</label> </td> <td style="text-align:center;"> <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"> <input type="text" id="propFieldName" value=".."> </div> </td> </tr> <tr data-id="1"> <td style="vertical-align: inherit;text-align:center;"> <label for="">numerItem</label> </td> <td style="text-align:center;"> <div class="ui-select"> <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"> <span>001</span> <select> <option value="">001</option> <option value="">002</option> </select> </div> </div> </td> </tr> <tr data-id="5075"> <td style="vertical-align: inherit;text-align:center;"> <label for="">diametr</label> </td> <td style="text-align:center;"> <div class="ui-select"> <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"> <span>6</span> <select> <option value="">3</option> <option value="">4</option> <option value="">6</option> </select> </div> </div> </td> </tr> <tr data-id="5076"> <td style="vertical-align: inherit;text-align:center;"> <label for="">multi</label> </td> <td style="text-align:center;"> <div class="ui-select"> <div id="select-49-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"> <span>no</span> <select> <option value="">yes</option> <option value="">no</option> </select> </div> </div> </td> </tr> </tbody> </table> <button onclick="btnClick()">get data</button> 

希望這個能對您有所幫助 ：）

Answer 3

var result = [];
$('.ui-table tr').each(function(){
    if(typeof $(this).data('id') != undefined && $(this).data('id') != '' && $(this).find('span').text().trim() != ''){
        var obj = {}
        obj.id = $(this).data('id');
        obj.value = $(this).find('span').text();
        result.push(obj); 
    }
});

Answer 4

 $('#getData' ).click(function() { $("#myTable tr[data-id]").each(function(){ var idval=$(this).attr('data-id'); var mydata=[]; if(idval!='' && idval!=undefined) { var cat = $(this).children('td:nth-child(2)').children('div:nth-child(1)').children('div:first-child').children('span').text(); mydata.push({ "id":idval, "value":cat}); } console.log(mydata); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table data-role="table" id="myTable" data-mode="columntoggle:none" class="ui-responsive ui-table"> <thead> <tr></tr> </thead> <tbody> <tr> <td style="vertical-align: inherit;text-align:center;"> <label for="">...</label> </td> <td style="text-align:center;"> <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"> <input type="text" id="propFieldName" value=".."> </div> </td> </tr> <tr data-id=""> <td style="vertical-align: inherit;text-align:center;"> <label for="">numerItem</label> </td> <td style="text-align:center;"> <div class="ui-select"> <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"> <span>001</span> <select> <option value="">001</option> <option value="">002</option> </select> </div> </div> </td> </tr> <tr data-id="5075"> <td style="vertical-align: inherit;text-align:center;"> <label for="">diametr</label> </td> <td style="text-align:center;"> <div class="ui-select"> <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"> <span>6</span> <select> <option value="">3</option> <option value="">4</option> <option value="">6</option> </select> </div> </div> </td> </tr> <tr data-id="5076"> <td style="vertical-align: inherit;text-align:center;"> <label for="">multi</label> </td> <td style="text-align:center;"> <div class="ui-select"> <div id="select-49-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"> <span>no</span> <select> <option value="">yes</option> <option value="">no</option> </select> </div> </div> </td> </tr> </tbody> </table> <input type="button" value="Get Data" id="getData" />