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

我需要在bootstrap中让table开始一个空的头，如果用户选择某个按钮，它将填充表行。
同时，用户应该能够突出显示并选择一行，然后执行某个操作。我让这一切与正常的html工作，但我们想添加引导样式。我以为这很容易，但似乎非常困难。
使用bootstrap all togeter甚至可以执行以下操作：
-在事件发生时动态添加行
-以便能够选择行并确定已选择的行。
谢谢

最佳答案

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

$(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>

关于javascript - 引导表，该表可动态向表和用户添加行，然后突出显示并选择一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39693313/