从HTML表

Question

我有一张表格可以显示一些数据。

此表中显示：

现在我有了这个按钮，它会显示值。在这个例子中，我想显示每一行的每个名字。

输出样本必须是：

alert('people.name');//of first row
alert('people.name'); //of second row
alert('people.name'); //and so on

我已经尝试过这段代码，但它说未定义：

$('#btn').click(function () {

    var name;
    var address;
    var contact;
    var people = [];

    $('#sample tbody tr').each(function () {
        var line = {
            'name': $(this).find('td:nth-child(1)').html(),
            'address': $(this).find('td:nth-child(2)').html(),
            'contact': $(this).find('td:nth-child(3)').html()
        };
        people.push(line);
        alert(people.name);
    });
});

但它的作用是返回undefined。 问题是什么？请帮帮我

我的表：

<table id="sample">
<thead>
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Contact</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Dave</td>
        <td>Alpha St.</td>
        <td>12345</td>
    </tr>
    <tr>
        <td>Jade</td>
        <td>Delta St.</td>
        <td>56789</td>
    </tr>
    <tr>
        <td>Elsa</td>
        <td>Beta St.</td>
        <td>54321</td>
    </tr>
    <tr>
        <td>Mack</td>
        <td>Fox St.</td>
        <td>52324</td>
    </tr>
</tbody>

Answer 1

请尝试使用此代码。

$(document).ready(function (){
          $('#btn').click(function () {

    var name;
var address;
var contact;
var people = [];

$('#sample tbody tr').each(function (value,key) {
    var line = {
        'name': $(this).find('td').html(),
        'address': $(this).find('td:nth-child(2)').html(),
        'contact': $(this).find('td:nth-child(3)').html()
    };
    people.push(line);
alert('Name =>   '+ people[value]['name'] +'  Address =>   '+ people[value]['address'] +'  Contact =>  ' + people[value]['contact']);

    });
console.log(people);
});
});

确保您的代码ID是唯一的。

您可以直接在阵列中显示姓名，联系方式，地址，如下所示：

console.log(people[key]['name']);//need to change key value contact,address.

希望这有帮助。

Answer 2

试试这个。

$('#btn').click(function () {

    var people = [];
    $('#sample tbody tr').each(function () {
        var $tds = $(this).find('td');
        var line = {
            name:     $tds.eq(0).text(),
            address:  $tds.eq(1).text(),
            contact:  $tds.eq(2).text()
        };
        people.push(line);        
    });

    var names = '';
    $(people).each(function () {
       names += this.name + ', ';
    });

   alert(names);
});

Answer 3

eq（i）从0开始

$('#btn').click(function () {
var name;
var address;
var contact;
var people = []
 $('#sample tbody tr').each(function () {
    var line = {
        'name': $(this).find('td').eq(0).text(),
        'address': $(this).find('td').eq(1).text(),
        'contact': $(this).find('td').eq(2).text()
    };
    people.push(line);
    alert(people.name);
});
});

Answer 4

据我了解你的问题，它会很好地运作。

$(document).ready(function (){
  $('#btn').on('click',function () {

    var name;
    var address;
    var contact;
    var people = [];

    $('#sample tbody tr').each(function (key,val) {

        var line = {
            'name': $(this).find('td:eq(0)').html(),
            'address': $(this).find('td:eq(1)').html(),
            'contact': $(this).find('td:eq(2)').html()
        };

        people.push(line);

        console.log("NAME: "+people[key]['name']);

        console.log("ADDRESS: "+people[key]['address']);

        console.log("CONTACT: "+people[key]['contact']);

    });

  });
});