動的に生成された各ブートストラップテーブルにボタンを入れます

Question

ブートストラップテーブルがあり、の下の各動的行に配置します。タブテキストのボタンに「イメージを取得」とします。これはコードです：私は私の実際のテーブルで写真を投稿します

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

（私は私が私のボタンが配置されるようにする方法を赤で塗装）：

Answer 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> 
 
           \t <td>1</td> 
 
           \t <td>23.02.2017</td> 
 
           \t <td>get image</td> 
 
          </tr> 
 
          <tr> 
 
           \t <td>2</td> 
 
           \t <td>23.02.2017</td> 
 
           \t <td>get image</td> 
 
          </tr> 
 
          <tr> 
 
           \t <td>3</td> 
 
           \t <td>23.02.2017</td> 
 
           \t <td>get image</td> 
 
          </tr> 
 
         </tbody> 
 
         
 
        </table> 
 
       </div> 
 
      </div>

希望すると便利です。