-1

I have a bootstrap table and I want to place on each dynamic row under the Tara Image tab a button with the text let's say "get image". This is the code:

<div role="tabpanel" class="tab-pane" id="missed-entries">
                <div class="container">
                    <div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">Lists all the missed balance-events entries that need further investigation.</div></div>
                    <table id="scale_missed_entries"
                           data-toggle="table"
                           data-pagination="true" 
                           >
                        <thead>
                            <tr>
                                <th data-field="product_weight">Weight</th>
                <th data-field="product_added_date">Added date</th>
                                <th>Tara Image</th>
                             </tr>
                        </thead>
                    </table>
                </div>
            </div>

I will post a picture with my actual table (I painted with red how I want my buttons to be placed):

enter image description here

5
  • placed through javascript or native html? Commented Feb 23, 2017 at 9:29
  • I would prefer native html Commented Feb 23, 2017 at 9:30
  • can you explain dynamic row? I've posted my answer. If that is not what you expect, let me know! Commented Feb 23, 2017 at 9:36
  • I posted a comment, basically that rows that you see are generated with some values from a database based on desired user timestamp, so I will have a random number of rows depends of how many entry's I have on that interval. Commented Feb 23, 2017 at 9:41
  • for that your question is a server-side question, add the tag for whatever language you're using on the server(and the framework too) and don't forget to include the backend code :)
    – niceman
    Commented Feb 23, 2017 at 9:42

1 Answer 1

1

var r = document.getElementById('MYTABLE').getElementsByTagName("tr");
for(i=0;i<r.length;i++){
    var td=r[i].getElementsByTagName("td")[2];
    var btn = document.createElement("BUTTON");        // Create a <button> element
    var t = document.createTextNode(td.innerHTML );       // Create a text node
    btn.appendChild(t);                                // Append the text to <button>

    td.removeChild(td.firstChild);
    td.appendChild(btn);
  }
<div role="tabpanel" class="tab-pane" id="missed-entries">
                <div class="container">
                    <div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">Lists all the missed balance-events entries that need further investigation.</div></div>
                    <table id="scale_missed_entries"
                           data-toggle="table"
                           data-pagination="true" 
                           >
                        <thead>
                        
                            <tr>
                                <th data-field="product_weight">Weight</th>
                <th data-field="product_added_date">Added date</th>
                                <th>Tara Image</th>
                             </tr>
                             </thead>
                             <tbody id='MYTABLE'>
                             <tr>
                             	<td>1</td>
                             	<td>23.02.2017</td>
                             	<td>get image</td>
                             </tr>
                             <tr>
                             	<td>2</td>
                             	<td>23.02.2017</td>
                             	<td>get image</td>
                             </tr>
                             <tr>
                             	<td>3</td>
                             	<td>23.02.2017</td>
                             	<td>get image</td>
                             </tr>
                        </tbody>
                        
                    </table>
                </div>
            </div>

Hope this helps!

1
  • Uhm, that's for 3 rows only, my rows will be generated in dynamic based on a calendar, I can have 3 rows but I also can have 40, based on user input! Commented Feb 23, 2017 at 9:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.