Javascript 如何循环浏览所有<；td>；在一行中标记，并在单击按钮时获取值

我正试图通过一个按钮点击一个拖车的所有元素循环

我的按钮：

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

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

我尝试打印

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>

名称
存储URL
地位
创建于
笔记
测试1221321
-
等待审核
大约3个小时
-
预装本产品
-
等待审核
大约3个小时
-
测试产品2
-
等待审核
大约3个小时
-
测试产品附加
-
等待审核
大约3个小时
-
宠物美容去毛刷手套
-
等待审核
大约2个月
这是一个测试说明，以查看表格中的wtf
LED狗项圈
-
等待审核
大约2个月
这是一个测试说明，以查看表格中的wtf
宠物美容去毛刷手套
-
等待审核
大约2个月
这是一个测试说明，以查看表格中的wtf

通过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>'
      }
    }
  ],       
});

$.ajax({
url:“/product/fetch\u admin\u products”，
键入：“获取”，
数据：{}，
成功：功能（resp）{
如果（resp）{
if（相应产品）{
设置表（分别为产品）
}
}
},
错误：函数（resp）{
},
});
$（“#productsTable”）.bootstrapTable({
数据：数据，
列：[
{宽度：“15%”，
{宽度：“15%”，
{宽度：“15%”，
{宽度：“15%”，
{宽度：“25%”，
{
字段：“操作”，
标题：“”，
宽度：“15%”，
对齐：'居中'，
valign:'中间'，
单击选择：false，
格式化程序：函数（值、行、索引）{
//返回“”；
返回“”+
'' +
''
}
}
],       
});

关于我做错了什么有线索吗？

---

我是否应该对此采取不同的方法？

问题是，在您的代码中，

viewProduct

的调用上下文是

window

，而不是

td

，导致

$（this）。最近（'tr'）

失败：

函数视图产品（）{
console.log（this.location.href）；
}

测试1221321
-
等待审核
大约3个小时
-

看起来您没有任何

td

s，因此

.find（'td'）

将找不到anything@CertainPerformance很抱歉，我忘了添加一点，即如果表中没有

td

，则无论从何处加载，我都在加载json数据，您将无法

。查找
任何
td
s@CertainPerformance但是当我检查页面时，我可以看到td元素。难道它不应该找到它吗？对不起，没有看到专栏。原因是，当您在
onclick
上调用
viewProduct（）
时，您在
viewProduct
中的
此
是
窗口
，而不是单击的
a
。调用并更改
viewProduct
时，使用
onclick=“viewProduct（this）”
接受参数
函数viewProduct（el）
，并将
$（this）
更改为
$（el）
，请参阅。。。另一种解决方案是使用
call
或
apply
和
this
作为第一个参数：
viewProduct.call（this）
$.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>'
      }
    }
  ],       
});