Add Buttons in a dynamically generated Table with JS

Question

I am quite new to JS and I am facing the following problem.

I have a web site in my machine that I run locally. The little code in HTML is as follows:

<div class="table-responsive">
    <h1>Json</h1>
    <br/>
    <table class="table table-bordered table-striped" id="concept_list">
        <tr>
            <th>Buttons</th>
            <th>Name</th>
            <th>color</th>
            <th>fingerprint</th>
            <th>hits</th>
            <th>ENGLISH</th>
            <th>FRENCH</th>
            <th>GERMAN</th> 
        </tr>
    </table>
</div>

This creates basically the headers of a table.

I want to read JSON files locally in my computer and add data to the table. I use a script as follows

<script >
$(document).ready(function(){
$.getJSON("pvmodule.json", function(data){
var concept_list= '';

$.each(data, function(key, value){
    concept_list += '<tr>';
    concept_list += '<td>'+"HERE I WANT TO INSERT A TOGGLE BUTTON"+'</td>';
    concept_list += '<td>'+value.name+'</td>';
    concept_list += '<td>'+value.color+'</td>';
    concept_list += '<td>'+value.fingerprint+'</td>';
    concept_list += '<td>'+value.hits+'</td>';
    concept_list += '<td>'+value.EN+'</td>';
    concept_list += '<td>'+value.DE+'</td>';
    concept_list += '<td>'+value.FR+'</td>';
    concept_list += '</tr>';
});
$('#concept_list').append(concept_list);
  });
});

</script>

In the JS code above I want to insert a button in the first cell of the table in every row. (where i wrote "HERE I WANT TO ADD A TOGGLE BUTTON") How do I dynamically add those buttons?

The intention being to add up in a field at the end of the web site all the values of the cells where the toggle buttons were clicked by the user.

Do you want to add one type of button or do you have a number of buttons to choose from some whare? — Dananjaya Ariyasena
– Dananjaya Ariyasena, Commented Jul 17, 2018 at 11:49
I use bootstrap to add buttons. But how a button looks like its a minor thing. The important thing for me as beginner is how to add the buttons and how to refer to them i.e. when clicking a button then add text in a field at the end — JFerro
– JFerro, Commented Jul 17, 2018 at 12:03

Shubham · Accepted Answer · 2018-07-17 11:48:44Z

2

concept_list += '<td>'+"HERE I WANT TO INSERT A TOGGLE BUTTON"+'</td>';

this should be

concept_list += '<td><button type="button>Click me</button></td>';

Refer Button on w3schools

answered Jul 17, 2018 at 11:48

Shubham

1,3042 gold badges11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JFerro Over a year ago

It works. But how do I distinguish one button from each other for afterwards looping through them?

Shubham Over a year ago

distinguish ? they will be in different rows. else you can put variable name or may value.name instead of CLick Me

Junaid Shahid · Accepted Answer · 2018-07-17 12:10:55Z

0

Add class first:

concept_list += '<td class="clickMe">'+"HERE I WANT TO INSERT A TOGGLE BUTTON"+'</td>';

Then use JQ to add button dynamically:

$(document).on('click','.clickMe',function(e){
$(this).html('<button>Hi</button>');
});

answered Jul 17, 2018 at 12:10

Junaid Shahid

511 silver badge3 bronze badges

Collectives™ on Stack Overflow

Add Buttons in a dynamically generated Table with JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related