jQuery选择特定的表格单元格并填充列表

时间:2019-08-15 04:33:28

标签: javascript jquery

我需要在每个表行的第一个td(主键)上进行选择,并用结果填充数组。

我要选择的表是使用foreach循环动态生成的

    var testArray = [];
    $(function () {
        $('#overview tr td').each(function (a) {
            var value = $(this); //doesn't work
            testArray.push( value );
        });
        console.log(JSON.stringify(testArray));
    });

    <table id="overview" class="table table-sm table-borderless">
        @if (Model.programmeInformationViewModel.SubjectAreas != null)
        {
            @foreach (var subject in 
            Model.programmeInformationViewModel.SubjectAreas)
            {                   
                <tr><td Hidden="Hidden">@subject.Key</td> 
                <td>@subject.Value</td></tr>
            }
        }
    </table>

2 个答案:

答案 0 :(得分:0)

您正在将DOM元素的jQuery参考推送到数组,因此它将无法按预期工作。如果需要文本内容,请对jQuery对象使用text()方法。

SELECT A.id,
(SELECT SUM(amount) FROM Deposits WHERE user_id = A.id) totalDeposits, 
(SELECT SUM(amount) FROM Withdrawals WHERE user_id = A.id) totalWithdraws 
FROM users A
WHERE A.id = 18 -- WHERE can be removed to get all users details

$(function () {
    $('#overview tr td').each(function (a) {
        var value = $(this).text(); //doesn't work
        testArray.push( value );
    });
    console.log(JSON.stringify(testArray));
});
var testArray = [];

$(function() {
  $('#overview tr td').each(function(a) {
    var value = $(this).text();
    testArray.push(value);
  });
  console.log(JSON.stringify(testArray));
});


如果您只想从第一个<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="overview"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>中获取值,则可以使用:first-child伪类选择器来获取第一列。

td

$(function () {
    $('#overview tr td:first-child').each(function (a) {
        var value = $(this).text(); //doesn't work
        testArray.push( value );
    });
    console.log(JSON.stringify(testArray));
});
var testArray = [];
$(function() {
  $('#overview tr td:first-child').each(function(a) {
    var value = $(this).text(); //doesn't work
    testArray.push(value);
  });
  console.log(JSON.stringify(testArray));
});


或者您可以使用jQuery <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="overview"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>map()方法获取数组。

get()

$(function () {
    testArray = $('#overview tr td:first-child').map(function (a) {
        return $(this).text();
    }).get();
    console.log(JSON.stringify(testArray));
});
var testArray = [];
$(function() {
  testArray = $('#overview tr td').map(function(a) {
    return $(this).text();
  }).get();
  console.log(JSON.stringify(testArray));
});

答案 1 :(得分:0)

要获取每个<td align="center" bgcolor="#008fd3" width="50" height="40" style="width: 20%;display: block;"> <a class="font14" style="font: 18px Arial, Helvetica, sans-serif;color: #ffffff;text-align: center;text-decoration: none;display: block;width: 100%;padding: 10px 0px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&amp;autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a> </td> 中的第一个td,可以使用tr,然后使用:first-child来获取其中的文本。

.text()
var testArray = [];
$(function () {
  $('#overview tr td:first-child').each(function () {
    var value = $(this).text();
    testArray.push( value );
  });
  console.log(testArray);
});