Question

我有一个像这样的html表：

<table class="table table-bordered table-striped table-condensed" id="table1">
<thead>
    <tr>
        <th>No.  </th>
        <th>No Request</th>
        <th>Username</th>
        <th>Start Time</th>
        <th>Complaint</th>                                            
        <th>Estimation</th>                                            
        <th>Action</th>
    </tr>
</thead>   
<tbody>
    <tr>
        <td class="center">1.  </td>

        <td class="sorting1" id='no_request' data-id-reseh="001">TMS/IT/04/001</td>

        <td class="center">Erika</td>

        <td class="center">06-04-2015, 18:26 </td>

        <td class="center" id="description">Erika yang minta</td>                                            

        <td class="center">06-04-2015, 18:56 </td>                                            

        <!-- Action-action -->
        <td  class="center">
            <a class="btn btn-info" id="btn-edit" name="edit"  data-toggle="modal" data-target="#myModal" role="button" title="Beri Keterangan Request No. 1">
                <i class="halflings-icon white edit"></i>
                Comment
            </a>

            <a class="btn btn-warning" >
                <i class="halflings-icon white arrow-up" id="print" email="tmsmkt1@tresnamuda.co.id"></i>
                Approve 
            </a>         
        </td>
    </tr>

    <tr>
        <td class="center">2.  </td>

        <td class="sorting1" id='no_request' data-id-reseh="002">TMS/IT/04/002</td>

        <td class="center">Ullinawati</td>

        <td class="center">06-04-2015, 18:27 </td>

        <td class="center" id="description">Ullie yang minta</td>                                            

        <td class="center">06-04-2015, 18:57 </td>                                            

        <td  class="center">
            <a class="btn btn-info" id="btn-edit" name="edit"  data-toggle="modal" data-target="#myModal" role="button" title="Beri Keterangan Request No. 2">
                <i class="halflings-icon white edit"></i>
                Comment
            </a>

            <a class="btn btn-warning" >
                <i class="halflings-icon white arrow-up" id="print" email="ullie@tresnamuda.co.id"></i>
                Approve 
            </a>         
        </td>
    </tr>

</tbody>

我的问题是，我可以根据表格的行grep属性“email”。所以我们可以说，第一行是=“tmsmkt1@tresnamuda.co.id”，第二行是=“ullie@tresnamuda.co.id”。我像这样编写了一些jquery代码：

  $(document).ready(function() {
    $(".btn-warning").click(function(e) {
        e.preventDefault();

        var $this = $(this);
        var idStr = $this.attr("email");

        console.log($this.attr('email')); // Failed
        console.log(idStr); // failed too

    });

感谢您的帮助...

Answer 1

由于email属性附加了i的子元素btn-warning，因此您需要使用find()

$(".btn-warning").click(function(e) {
    e.preventDefault();
    console.log($(this).find("i").attr('email')); 
});

find()将获取子元素。 Fiddle

Answer 2

由于ID在页面中是唯一的，因此我可以在您的页面中看到您已将相同的ID应用于元素的多个元素 (i) ，因此会导致 无效的标记生成 。在这种情况下，我建议你删除id属性并将其放在类名中：

<i class="halflings-icon white arrow-up print" email="tmsmkt1@tresnamuda.co.id"></i>

然后您可以将其定位为：

var idStr = $this.find('.print').attr("email");

Answer 3

一种方法是使用children（）函数来查找i元素

$(".btn-warning").click(function(e) {
    e.preventDefault();
    console.log($(this).children("i").attr('email'));
});

jsfiddle：https://jsfiddle.net/51fevoam/12/

使用jquery在表上连续获取一些属性

3 个答案: