如何循环遍历行中的所有标记并按下按钮

时间：2018-05-29 21:51:33

标签： javascript jquery

我试图通过点击按钮来遍历拖曳中的所有元素

我的按钮：

`<a href="#" style="margin-right: 5px" onclick="viewProduct()" class="btn btn-info btn-xs"><i style="font-size: 15px" class="fa fa-eye"></i></a>`

我的onclick方法：

   $(this).closest('tr').find('td').each(function() {
        var textval = $(this).text(); 
        console.log('textval');
   });

出于某种原因，这根本不打印我们的任何东西，它甚至没有进入每个代码。

我尝试打印console.log($(this).closest('tr').find('td').text())

但它只显示空白文字。

这是我的表格行：

            <table id="productsTable" class="table-saas table table-hover" data-pagination="true" data-page-size="10">
<thead>
    <tr>
        <th style="width: 15%; " data-field="name">
            <div class="th-inner ">Name</div>
            <div class="fht-cell"></div>
        </th>
        <th style="width: 15%; " data-field="store_url">
            <div class="th-inner ">Store URL</div>
            <div class="fht-cell"></div>
        </th>
        <th style="width: 15%; " data-field="status">
            <div class="th-inner ">Status</div>
            <div class="fht-cell"></div>
        </th>
        <th style="width: 15%; " data-field="created_at">
            <div class="th-inner ">Created At</div>
            <div class="fht-cell"></div>
        </th>
        <th style="width: 25%; " data-field="notes">
            <div class="th-inner ">Notes</div>
            <div class="fht-cell"></div>
        </th>
        <th style="text-align: center; vertical-align: middle; width: 15%; " data-field="operate">
            <div class="th-inner "></div>
            <div class="fht-cell"></div>
        </th>
    </tr>
</thead>
<tbody>
    <tr data-index="0">
        <td style="width: 15%; ">test 1221321</td>
        <td style="width: 15%; ">-</td>
        <td style="width: 15%; ">pending review</td>
        <td style="width: 15%; ">about 3 hours</td>
        <td style="width: 25%; ">-</td>
        <td style="text-align: center; vertical-align: middle; width: 15%; "><a href="#" style="margin-right: 5px" onclick="approveProduct()" class="btn btn-success btn-xs"><i style="font-size: 15px" class="fa fa-arrow-right"></i></a><a href="#" style="margin-right: 5px" onclick="viewProduct()" class="btn btn-info btn-xs"><i style="font-size: 15px" class="fa fa-eye"></i></a><a href="#" onclick="deleteProduct()" class="btn  btn-danger btn-xs"><i style="font-size: 15px" class="fa fa-trash-o"></i></a></td>
    </tr>
    <tr data-index="1">
        <td style="width: 15%; ">prepend this product</td>
        <td style="width: 15%; ">-</td>
        <td style="width: 15%; ">pending review</td>
        <td style="width: 15%; ">about 3 hours</td>
        <td style="width: 25%; ">-</td>
        <td style="text-align: center; vertical-align: middle; width: 15%; "><a href="#" style="margin-right: 5px" onclick="approveProduct()" class="btn btn-success btn-xs"><i style="font-size: 15px" class="fa fa-arrow-right"></i></a><a href="#" style="margin-right: 5px" onclick="viewProduct()" class="btn btn-info btn-xs"><i style="font-size: 15px" class="fa fa-eye"></i></a><a href="#" onclick="deleteProduct()" class="btn  btn-danger btn-xs"><i style="font-size: 15px" class="fa fa-trash-o"></i></a></td>
    </tr>
    <tr data-index="2">
        <td style="width: 15%; ">test product 2</td>
        <td style="width: 15%; ">-</td>
        <td style="width: 15%; ">pending review</td>
        <td style="width: 15%; ">about 3 hours</td>
        <td style="width: 25%; ">-</td>
        <td style="text-align: center; vertical-align: middle; width: 15%; "><a href="#" style="margin-right: 5px" onclick="approveProduct()" class="btn btn-success btn-xs"><i style="font-size: 15px" class="fa fa-arrow-right"></i></a><a href="#" style="margin-right: 5px" onclick="viewProduct()" class="btn btn-info btn-xs"><i style="font-size: 15px" class="fa fa-eye"></i></a><a href="#" onclick="deleteProduct()" class="btn  btn-danger btn-xs"><i style="font-size: 15px" class="fa fa-trash-o"></i></a></td>
    </tr>
    <tr data-index="3">
        <td style="width: 15%; ">Test product append</td>
        <td style="width: 15%; ">-</td>
        <td style="width: 15%; ">pending review</td>
        <td style="width: 15%; ">about 3 hours</td>
        <td style="width: 25%; ">-</td>
        <td style="text-align: center; vertical-align: middle; width: 15%; "><a href="#" style="margin-right: 5px" onclick="approveProduct()" class="btn btn-success btn-xs"><i style="font-size: 15px" class="fa fa-arrow-right"></i></a><a href="#" style="margin-right: 5px" onclick="viewProduct()" class="btn btn-info btn-xs"><i style="font-size: 15px" class="fa fa-eye"></i></a><a href="#" onclick="deleteProduct()" class="btn  btn-danger btn-xs"><i style="font-size: 15px" class="fa fa-trash-o"></i></a></td>
    </tr>
    <tr data-index="4">
        <td style="width: 15%; ">Pet Grooming Deshedding Brush Glove&nbsp;</td>
        <td style="width: 15%; ">-</td>
        <td style="width: 15%; ">pending review</td>
        <td style="width: 15%; ">about 2 months</td>
        <td style="width: 25%; ">This is a test note to see wtf the table does with it</td>
        <td style="text-align: center; vertical-align: middle; width: 15%; "><a href="#" style="margin-right: 5px" onclick="approveProduct()" class="btn btn-success btn-xs"><i style="font-size: 15px" class="fa fa-arrow-right"></i></a><a href="#" style="margin-right: 5px" onclick="viewProduct()" class="btn btn-info btn-xs"><i style="font-size: 15px" class="fa fa-eye"></i></a><a href="#" onclick="deleteProduct()" class="btn  btn-danger btn-xs"><i style="font-size: 15px" class="fa fa-trash-o"></i></a></td>
    </tr>
    <tr data-index="5">
        <td style="width: 15%; ">LED Dog Collar</td>
        <td style="width: 15%; ">-</td>
        <td style="width: 15%; ">pending review</td>
        <td style="width: 15%; ">about 2 months</td>
        <td style="width: 25%; ">This is a test note to see wtf the table does with it</td>
        <td style="text-align: center; vertical-align: middle; width: 15%; "><a href="#" style="margin-right: 5px" onclick="approveProduct()" class="btn btn-success btn-xs"><i style="font-size: 15px" class="fa fa-arrow-right"></i></a><a href="#" style="margin-right: 5px" onclick="viewProduct()" class="btn btn-info btn-xs"><i style="font-size: 15px" class="fa fa-eye"></i></a><a href="#" onclick="deleteProduct()" class="btn  btn-danger btn-xs"><i style="font-size: 15px" class="fa fa-trash-o"></i></a></td>
    </tr>
    <tr data-index="6">
        <td style="width: 15%; ">Pet Grooming Deshedding Brush Glove&nbsp;</td>
        <td style="width: 15%; ">-</td>
        <td style="width: 15%; ">pending review</td>
        <td style="width: 15%; ">about 2 months</td>
        <td style="width: 25%; ">This is a test note to see wtf the table does with it</td>
        <td style="text-align: center; vertical-align: middle; width: 15%; "><a href="#" style="margin-right: 5px" onclick="approveProduct()" class="btn btn-success btn-xs"><i style="font-size: 15px" class="fa fa-arrow-right"></i></a><a href="#" style="margin-right: 5px" onclick="viewProduct()" class="btn btn-info btn-xs"><i style="font-size: 15px" class="fa fa-eye"></i></a><a href="#" onclick="deleteProduct()" class="btn  btn-danger btn-xs"><i style="font-size: 15px" class="fa fa-trash-o"></i></a></td>
    </tr>
</tbody>

通过ajax调用加载我的数据：

$.ajax({
    url: "/product/fetch_admin_products",
    type: "GET",
    data: {},
    success: function(resp) {

        if (resp) {
            if (resp.products) {

                setupTable(resp.products)
            }
        }
    },
    error: function(resp) {


    },
});

$('#productsTable').bootstrapTable({
 data: data,
 columns: [ 
    { width: "15%" },
    { width: "15%" },
    { width: "15%" },
    { width: "15%" },
    { width: "25%" },
    {
      field: 'operate',
      title: '',
      width: '15%',
      align: 'center',
      valign: 'middle',
      clickToSelect: false,
      formatter : function(value,row,index) {
        //return '<input name="elementname"  value="'+value+'"/>';
        return  '<a href="#" style="margin-right: 5px" onclick="approveProduct()" class="btn btn-success btn-xs"><i style="font-size: 15px" class="fa fa-arrow-right"></i></a>' +
                '<a href="#" style="margin-right: 5px" onclick="viewProduct()" class="btn btn-info btn-xs"><i style="font-size: 15px" class="fa fa-eye"></i></a>' +
                '<a href="#" onclick="deleteProduct()" class="btn  btn-danger btn-xs"><i style="font-size: 15px" class="fa fa-trash-o"></i></a>'
      }
    }
  ],       
});

关于我做错了什么的任何线索？ 我应该对此采取不同的方法吗？

1 个答案:

答案 0 :(得分：1)

问题是，在您的代码中，viewProduct的调用上下文为window，而不是td，导致$(this).closest('tr')失败：

＆＃13;
＆＃13; 
function viewProduct () {
  console.log(this.location.href);
}
＆＃13; 
<table>
  <tbody>
    <tr data-index="0">
      <td style="width: 15%; ">test 1221321</td>
      <td style="width: 15%; ">-</td>
      <td style="width: 15%; ">pending review</td>
      <td style="width: 15%; ">about 3 hours</td>
      <td style="width: 25%; ">-</td>
      <td style="text-align: center; vertical-align: middle; width: 15%; "><a href="#" style="margin-right: 5px" onclick="approveProduct()" class="btn btn-success btn-xs"><i style="font-size: 15px" class="fa fa-arrow-right"></i></a><a href="#" style="margin-right: 5px" onclick="viewProduct()" class="btn btn-info btn-xs"><i style="font-size: 15px" class="fa fa-eye">view</i></a>
        <a
          href="#" onclick="deleteProduct()" class="btn  btn-danger btn-xs"><i style="font-size: 15px" class="fa fa-trash-o"></i></a>
      </td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

相反，使用Javascript正确附加事件处理程序，您可以显式引用所需的td及其包含tr。例如：

＆＃13;
＆＃13; 
const td = document.querySelector('td:last-child');
td.onclick = function() {
  [...td.parentElement.children].forEach(td => console.log(td.textContent));
}
＆＃13; 
<table>
  <tbody>
    <tr data-index="0">
      <td style="width: 15%; ">test 1221321</td>
      <td style="width: 15%; ">-</td>
      <td style="width: 15%; ">pending review</td>
      <td style="width: 15%; ">about 3 hours</td>
      <td style="width: 25%; ">-</td>
      <td style="text-align: center; vertical-align: middle; width: 15%; "><a href="#" style="margin-right: 5px" class="btn btn-success btn-xs"><i style="font-size: 15px" class="fa fa-arrow-right"></i></a><a href="#" style="margin-right: 5px" class="btn btn-info btn-xs"><i style="font-size: 15px" class="fa fa-eye">view</i></a>
        <a
          href="#" class="btn  btn-danger btn-xs"><i style="font-size: 15px" class="fa fa-trash-o"></i></a>
      </td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题