Question

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

- 能够选择行并确定选择了哪一行。

由于

Answer 1

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

＆＃13;

$(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>')
})

＆＃13;

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

＆＃13;

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

- 能够选择行并确定选择了哪一行。

1 个答案: