在每个动态生成的引导表上放置一个按钮

时间:2017-02-23 09:27:43

标签: html twitter-bootstrap

我有一个引导程序表,我想在 Tara Image 标签下的每个动态行上放置一个按钮,文本让我们说“获取图像”。这是代码:

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

我会用我的实际桌子张贴一张照片(我用红色涂上我想要放置按钮的方式):

enter image description here

1 个答案:

答案 0 :(得分: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>

希望这有帮助!