CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user3470688
user3470688

Reputation: 559

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

I need in bootstrap to have table starts an empty header and if the user selects certain button it will populate the table rows. Also at the same time the user should be able to highlight and select a row and then a certain action will take place. I had this all working with normal html but we wanted to add bootstrap styling. I thought that would be easy but seems extremely difficult. Is it even possible to do the following with bootstrap all togeter: - dynamically add rows as events happen

- to be able to select row and determine which row has been selected.

Thanks

Upvotes: 2

Views: 1009

Answers (1)

8eecf0d2
8eecf0d2

Reputation: 1579

I don't know much jQuery, the snippet below provides basic interaction - you would need to change it to suit your env. If you provide code people can give much better answers.

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

Upvotes: 2

Related Questions