引导表，动态地向表和用户添加行，然后突出显示并选择一行

bootstrap table that dynamically adds rows to table and user then highlight and select a row

本文关键字：选择 显示 一行 然后 动态 添加行 用户      更新时间：2023-09-26

我需要在引导有表开始一个空标题，如果用户选择某些按钮，它将填充表行。也在同一时间，用户应该能够突出显示和选择一行，然后一个特定的行动将发生。我有这一切与普通的html工作，但我们想添加引导样式。我以为那很容易，但看起来却极其困难。它甚至有可能做以下与bootstrap一起:-在事件发生时动态添加行

-能够选择行并确定哪一行已被选中。

谢谢

我对jQuery了解不多，下面的代码片段提供了基本的交互-您需要更改它以适应您的环境。如果你提供代码，人们可以给出更好的答案。

$(document).on('click', 'tr', function(e) {
  $('tr').css('background-color', '')
  $(this).css('background-color', 'red')
})
$('button').on('click', function(e){
  $('tbody').append('<tr><td>..</td><td>..</td></tr>')
})
$('select').on('change', function(e){
  var value = $(this).val(),
      dataset = data.filter(function(item) { return item.name === value } )[0]
  
  $('tbody').html('')
  dataset.data.forEach(function(item) {
    $('tbody').append('<tr><td>'+item.name+'</td><td>'+item.age+'</td></tr>')
  })
})
var data = [{
  name: 'people',
  data: [
    {name: 'Kelly', age: 27},
    {name: 'John', age: 22},
    {name: 'Sally', age: 29},
    {name: 'Mike', age: 26},
  ]
},{
  name: 'planets',
  data: [
    {name: 'Pluto', age: 2700},
    {name: 'Earth', age: 2200},
    {name: 'Moon', age: 2900},
    {name: 'Sun', age: 2600},
  ]
}]
  
data.forEach(function(data) {
  $('select').append('<option value="' + data.name + '">' + data.name + '</option>')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

相关文章：