时间戳

首页 > 解决方案 > 如何将 botton 放在表格旁边的行数据 html 引导程序

javascript - 如何将 botton 放在表格旁边的行数据 html 引导程序

问题描述

我想在表格的每一行数据中的表格数据旁边制作一个按钮。我试图为它创建一个新列来放置按钮，但它有一个边框。我想要它没有边框，只是按钮。我为此使用引导程序 4

这是我的html

<div class="card-body col-10">
          <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Password</th>
                  <th>Phone</th>
                  <th>Privilege</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Password</th>
                  <th>Phone</th>
                  <th>Privilege</th>
              </tfoot>
              <tbody>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System@you.com</td>
                  <td>Edinburgh</td>
                  <td>081290188409</td>
                  <td>1</td>
                </tr>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System@you.com</td>
                  <td>Edinburgh</td>
                  <td>081290188409</td>
                  <td>1</td>
                </tr>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System@you.com</td>
                  <td>Edinburgh</td>
                  <td>081290188409</td>
                  <td>1</td>
                </tr>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System@you.com</td>
                  <td>Edinburgh</td>
                  <td>081290188409</td>
                  <td>1</td>
                </tr>
               
                                 
              </tbody>
            </table>
          </div>
        </div>

我想让特权旁边的表格右侧的按钮不是表格。

我试图让它像这个代码中的表格

<div class="card-body col-1">
      <div class="tablen float-left">
        <table class="table table-borderless" id="dataTable" width="100%" cellspacing="0">
          <thead>
            <tr>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><button type="button" class="btn btn-danger fas fa-table float-left"></button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

但它离它旁边的桌子太远了。我想要它就在桌子旁边。如果你知道请帮忙。谢谢你

标签： javascripthtmlcssbootstrap-4bootstrap-table

解决方案

使用 JQuery，您可以使用它，

它也可以通过 CSS3 使用 :before 来解决，但我不知道它的确切语法。

所以这里是 JQuery 代码

$("td").each(function (){
    $(this).append("<button type='button' class='btn btn-danger fas fa-table float-left'></button>" );
});

推荐阅读