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

Question

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

Answer 1

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>