Javascript 使用jquery获取引导中选定表行的值

我正在使用引导表。在这种情况下，我希望在单击同一页面上的“添加到购物车”按钮后，获取所选表行的

项目ID

值

表代码：

<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="tables/data2.json"  data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true">
  <thead>
    <tr>
      <th data-field="state" data-checkbox="true"></th>
      <th data-field="id" >Item ID</th>
      <th data-field="name" data-sortable="true">Product Name</th>
      <th data-field="price" data-sortable="true">Actual Price</th>
      <th data-field="discount_price" data-sortable="true">Discount Price</th>
      <th data-field="stock_avail" data-sortable="true">Stock Available</th>
    </tr>
  </thead>
</table>

由于我是新的引导，我试图解决这个问题，但没有得到适当的解决方案任何人请告诉我这一点

---

下面是一个示例，请将其提供给您：

HTML

<table id="table-style">
<thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id">Item ID</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>5</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>15</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>10</td>
    </tr>
</thead>
</table>

<button>Add to cart</button>

---

只需使用

check.bs.table

和

uncheck.bs.table

事件来收集选中的行

以下是一个例子：

var checkedRows=[]；
$（'#eventsTable'）.on（'check.bs.table'，函数（e，行）{
checkedRows.push（{id:row.id，name:row.name，forks:row.forks}）；
console.log（checkedRows）；
});
$（'#eventsTable'）.on（'uncheck.bs.table'，函数（e，行）{
$.each（选中行、函数（索引、值）{
if（value.id==row.id）{
检查箭头拼接（索引1）；
}
});
console.log（checkedRows）；
});
$（“#添加购物车”）。单击（函数（）{
$（“#输出”）.empty（）；
$.each（选中行、函数（索引、值）{
$（“#输出”）.append（$（“
”）.text（value.id+“|”+value.name+“|”+value.forks））；
});
});

名称
星星
叉子
描述
添加到卡
引导表有一个函数getSelections

使用javascript函数，您可以获得所有选定的行。（您的checkobx字段应绑定到数据字段=“state”）

要获取选定（选中）行，请使用方法

请注意，如果使用分页，则必须使用table选项

下面是一个示例，当用户单击“显示选定行”按钮时显示选定产品的名称：


var$table=$（'#myTable'）；
函数getRowSelections（）{
返回$.map（$table.bootstrapTable（'getSelections'），函数（行）{
返回行；
})
}
$（“#showSelectedRows”）。单击（函数（）{
var selectedRows=getRowSelections（）；
var selectedItems='\n'；
$.each（selectedRows、函数（索引、值）{
selectedItems+=value.name+'\n'；
});
警报（'选择了以下产品：'+selectedItems）；
});

显示所选行
项目ID
品名
价格
1.
椅子
$80
2.
沙发
$500
3.
书桌
$300
4.
地毯
$200
tr td
数据是什么样子的？@NorlihazmeyGhazali-请看我编辑的问题。对不起，再一次，你能确定表行的HTML结构吗，想看看HTML是如何呈现的吗。就几行enough@NorlihazmeyGhazali-我将引导表插件用于表。很抱歉，您的解决方案与我的不匹配，该表从data url=“tables/data2.json”中获取数据，并且引导会自动获取复选框。那么，如果选中“特定”，如何获取项目ID值？您已经尝试过了吗？不管数据来自何处，也不管DOM如何将数据呈现到页面中的最后一点是什么。检查表上的元素，然后复制它的结构，然后将其粘贴到此处，以获得更多指定的解决方案。我正在使用此解决方案only@Vg. 见主要答案。这些插件都有自己的事件函数。感谢大家的努力，DavidDomain的答案是正确的。太棒了，太完美了。您好，可以将此代码（仅显示选定项）设置为与普通表一起工作（数据源来自html，而非JSON）？对不起，我不知道。谢谢您的帮助。@Tudor如果数据是静态HTML或来自JSON，应该不会有任何区别。你试过了吗？是的。我的问题是，我无法从JS为这个被剪断的对象做到这一点：。你能帮个忙吗？答案中的Link（）已经不起作用了。这对我来说是一个更干净的解决方案，非常有效。有一些解决方案，它很干净，并且使用了自己的引导表方法，非常有效！
<table id="table-style">
<thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id">Item ID</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>5</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>15</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>10</td>
    </tr>
</thead>
</table>

<button>Add to cart</button>

var arr;
$('button').click(function(){
  arr = $('#table-style').find('[type="checkbox"]:checked').map(function(){
      return $(this).closest('tr').find('td:nth-child(2)').text();
  }).get();

  console.log(arr);
});

            function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.Id
            });
        }