如何使用 jQuery 在 Bootstrap 模型中显示表格选定行的内容？

在 Bootstrap 模型中，我们经常需要使用表格来展示数据。而有时，我们需要在表格中选定某一行，并在页面其他位置展示所选定的行的内容。这时，可以使用 jQuery 来实现该功能。

步骤

1. 给表格的行添加点击事件

我们需要给表格的每一行添加点击事件，以便在点击某一行时，能够获取该行的数据。可以通过以下代码来实现：

$('#myTable tbody').on('click', 'tr', function() {
  // 需要执行的代码
});

其中，myTable 表示表格的 id，tbody 表示表格的主体部分，tr 表示表格的每一行。

2. 获取所选行的数据

在点击某一行后，我们需要获取该行的数据。可以使用以下代码：

var rowData = $(this).find('td').map(function() {
  return $(this).text();
}).get();

其中，this 表示所点击的行，td 表示该行的单元格，text() 函数返回单元格中的文本内容，map() 函数可以将单元格中的数据转化为数组，get() 函数可以返回一个原生的 JavaScript 数组。

3. 展示所选行的数据

获取到所选行的数据后，我们需要在页面其他位置展示这些数据。可以通过以下代码来实现：

$('#myDiv').html('<p>' + rowData.join('</p><p>') + '</p>');

其中，myDiv 表示需要展示数据的位置，html() 函数可以设置元素的 HTML 内容，join() 函数可以以指定字符连接数组元素，这里我们使用了 </p><p> 符号，以使得每个单元格的数据都显示在不同的段落中。

完整代码

$('#myTable tbody').on('click', 'tr', function() {
  var rowData = $(this).find('td').map(function() {
    return $(this).text();
  }).get();
  $('#myDiv').html('<p>' + rowData.join('</p><p>') + '</p>');
});

结论

使用上述代码可以实现在 Bootstrap 模型中显示表格选定行的内容，可以根据实际需要进行修改和优化。