Getting data attribute from td returns undefined

Question

I'm not sure if this is correct but I'm trying to get a data attribute from a td instead of a tr . I have a data-id attribute there already.

<tbody>
<?php $offset = $this->uri->segment(5,0)+1; ?>
<?php foreach($user as $row): ?>
<tr data-id="<?php echo $row->id; ?>">
<td><?php echo $offset++; ?></td>
<td><?php echo $row->company; ?></td>
<td data-company="<?php echo $row->id; ?>"><input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>"/><input type="button" class="expandlink_admin" value="+"/></td>
<td><input type="hidden" class="id" name="id" value="<?php echo $row->id; ? >"/><input type="button" class="shrinklink_admin" value="-"/></td>
<td><input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>"/><input type="hidden" name="company" value="<?php echo $row->id; ?>"/><input type="hidden" name="set" value="edit"/><input type="button" class="editlink_company" value="Edit"/></td>
<td><input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>"/><input type="hidden" name="company" value="<?php echo $row->id; ?>"/><input type="hidden" name="set" value="delete"/><input type="button" class="deletelink" value="Delete"/></td>
</tr>
<tr class="subtable">
<td colspan="9">
<input type="hidden" value="<?php echo $row->id; ?>"/>
<table class="table">
<tr>
<td>Total Agents : </td>    
<td id="totalagents"></td>
<td>Address : </td>
<td><?php echo $row->address; ?></td>
</tr>
<tr>
<td>Total Users : </td>
<td id="totalusers"></td>
<td>Date Added : </td>
<td><?php echo $row->date_added; ?></td>
</tr>
</table>
</td>
</tr>
<?php endforeach; ?>
</tbody>

$('.expandlink_admin').on('click', function() {
var $row = $(this).closest('tr');
var curr_row = $row.data('id');
var company = $(this).closest('td').data('company');
// console.log(curr_row);
console.log(company);
 var row = $(this).parents("tr");
 $.ajax({
    url: '/manager/administrator/users/count_agents',
    type: 'POST',
    dataType:'json',
    data:{id:curr_row},
    cache:false,
    success:function(result){
    //console.log(result);
     $(".subtable").each(function() { //loop through each row
            if($("[type='hidden']", this).val() == curr_row) { 
                  $(this).show();
                 row.find('.expandlink_admin').hide();
                 row.find('.shrinklink_admin').show();
             }
     });
}});
});

So far it keeps returning an undefined value. Please help

Answer 1

尝试这个

var curr_row = $(this).parent('tr').attr('data-id');

Answer 2

var curr_row = $(this).parent().attr('data-id');
var curr_comp = $(this).data('company');

Answer 3

It's hard to understant what this stands for. But if $(this) is input then it should be:

var curr_row = $(this).parents('tr').attr('data-id');
var curr_comp = $(this).parent().data('company'); //<-- parent() added

And if $(this) is td then it should be:

var curr_row = $(this).parent('tr').attr('data-id');
var curr_comp = $(this).data('company');

Answer 4

Your chained parent() calls are going too high up the DOM to get the parent tr element. Instead, you can use closest() . Also note it's better practice to use data() to retrieve data attributes. Try this:

var $row = $(this).closest("tr");
var rowid = $row.data('id');
var company = $(this).closest('td').data('company');

Here's a complete example

$('.expandlink_admin').on('click', function() {
    var $row = $(this).closest("tr");
    var rowid = $row.data('id');
    var company = $(this).closest('td').data('company');

    $.ajax({
        url: '/manager/administrator/users/count_agents',
        type: 'POST',
        dataType:'json',
        data: {
            id: rowid    
        },
        cache: false,
        success: function(result) {
            $(".subtable").each(function() { //loop through each row
                if ($("[type='hidden']", this).val() == rowid) { 
                    $(this).show();
                    $row.find('.expandlink_admin').hide();
                    $row.find('.shrinklink_admin').show();
                }
            });
        }
    });
});

Answer 5

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function(){
        //$("#dvTable").hide();
        $("#btnGenerate").click(function () {

            szTr = '<tr data-id="test_data_id">'
            szTr = szTr + '<td>first</td>'
            szTr = szTr + '<td>company</td>'
            szTr = szTr + '<td data-company="data_company"><input type="hidden" class="id" name="id" value="row_id"/>'
            szTr = szTr + '<input type="button" class="expandlink_admin" value="+"/>'
            szTr = szTr + '</td>'
            szTr = szTr + '<td><input type="hidden" class="id" name="id" value="row_id"/><input type="button" class="shrinklink_admin" value="-"/></td>'
            szTr = szTr + '<td><input type="hidden" class="id" name="id" value="row_id"/><input type="hidden" name="company" value="row_id"/><input type="hidden" name="set" value="edit"/><input type="button" class="editlink_company" value="Edit"/></td>'
            szTr = szTr + '<td><input type="hidden" class="id" name="id" value="row_id"/><input type="hidden" name="company" value="row_id"/><input type="hidden" name="set" value="delete"/><input type="button" class="deletelink" value="Delete"/></td>'
            szTr = szTr + '</tr>'

            $('#display tbody').append(szTr);

        });


        $('body').on('click', '.expandlink_admin', function () {
                var curr_row = $(this).parent().parent('tr').attr('data-id');
                alert(curr_row)
        });


    });



</script>
</head>
<body>
     <input type="button" value="Generate" id="btnGenerate">
     <table id="display">
<tbody>



</tbody>

</table>
</body>
</html>