javascript - 如何将按钮放在表格旁边行数据 html bootstrap

Question

我想在表格的每一行数据中的表格数据旁边制作一个按钮。我试图为它创建一个新列来放置按钮，但上面有一个边框。我想要它没有边框，只有按钮。我为此使用 bootstrap 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>

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

Answer 1

对于 JQuery，您可以使用它，

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

这里是 JQuery 代码

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