单击按钮时添加行和列 bootstrap

Question

我有一个要求，用户应该能够在 bootstrap table 中动态添加行和列。在按钮上单击一个新行，然后在另一个按钮上单击一个新列。

类似地，点击“-”按钮，需要删除行，点击另一个按钮，需要删除列。

我是bootstrap 3的新手。任何指导都会有很大帮助！！

Answer 1

您可以使用 jquery 来做到这一点，这是一个简单的例子： https://jsfiddle.net/1okx6pja/ Html :

<button onclick='add()'>
  add
</button>
<table>
  <tr>
    <th>content</th>
    <th>delete</th>
  </tr>
  <tbody>
    <tr>
      <td>Something</td>
      <td>
        <button onclick='rm()'>
          remove
        </button>
      </td>
    </tr>
  </tbody>
</table>

javascript :

function rm() {
  $(event.target).closest("tr").remove();
}

function add() {
  $("table").append("<tr><td>New Thing</td><td><button onclick='rm()'>remove</button></td></tr>");
}

如果您有什么不明白的地方，请随时提问

单击按钮时添加行和列 bootstrap

Adding rows and columns on button clicks bootstrap

rows

dynamic-columns

twitter-bootstrap

bootstrap-modal