堆栈内存溢出
  繁体   English   中英

从td获取数据属性返回未定义

[英]Getting data attribute from td returns undefined

 原文  2016-01-21 08:06:44  1   5    javascript/ jquery

问题描述

我不确定这是否正确，但是我正在尝试从td而不是tr获取data属性。 我已经有一个data-id属性。 

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

到目前为止，它一直返回未定义的值。 请帮忙

5 个解决方案

解决方案1
 0  2016-01-21 08:10:08

尝试这个

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

解决方案2
 0  2016-01-21 08:12:43

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

解决方案3
 0  2016-01-21 08:13:56

很难理解this代表什么。 但是，如果输入了$(this) ，则它应该是： 

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

如果$(this)是td则应该是： 

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

解决方案4
 0 已采纳  2016-01-21 08:15:40

您链接的parent()调用在DOM中的位置过高，无法获取父tr元素。 相反，您可以使用closest() 。 另请注意，使用data()检索数据属性是一种更好的做法。 尝试这个： 

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

这是一个完整的例子 

$('.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();
                }
            });
        }
    });
});

解决方案5
 0  2016-01-21 08:56:07

<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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JavaScript-获取数据属性值返回未定义 获取data-id属性返回未定义 在td中获取数据属性值 `td` 的 `getElementsByTagName` 返回 `undefined` Discord.js 从 JSON 文件中获取数据返回“未定义” 尝试从数据属性获取ID时变得不确定 jQuery 无法获取数据属性，返回未定义 数据属性中的未定义值 jQuery获取返回未定义的数据属性 从数据属性获取数据
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM