更新Bootstrap表上的颜色单元格

qrjkbowd 于 2022-12-25 发布在 Bootstrap

关注(0)|答案(2)|浏览(175)

我正在使用这个Bootstrap表插件：http://bootstrap-table.wenzhixin.net.cn/documentation/
表格运行良好，我正在使用 AJAX 推送一个json数组，表格完成后，我有一个按钮，点击这个按钮会调用一些函数，需要更新一些单元格颜色，我有一个代码示例如下：

if (condition is tru){

    $table.bootstrapTable('updateCell', {
        index: 0,
        field: 'SrcPath',
        value: 'new value'
    });
}

用updateCell我可以改变当前值...有没有办法改变背景色而不是值？

twitter-bootstrap

来源：https://stackoverflow.com/questions/37636292/update-color-cell-on-bootstrap-table

2条答案

按热度按时间

w80xi6nr1#

您可以添加上下文颜色到<td>和<td>标签。您也可以使用style="...."内联样式每个元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="info">John</td>
        <td class="danger">Doe</td>
        <td style="background-color:grey">john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

赞(0）回复(0）举报 2022-12-25

0lvr5msh2#

要修改表，你必须监听table的事件，在这种情况下，你可以使用postBody事件。表将在一些操作后重新呈现，所以必须再次应用样式。
示例：https://live.bootstrap-table.com/code/UtechtDustin/13775
来源：https://github.com/wenzhixin/bootstrap-table/issues/6527
示例代码重复：

<div id="toolbar">
  <button id="button" class="btn btn-secondary">append</button>
</div>
<table
  id="table"
  data-toggle="table"
  data-toolbar="#toolbar"
  data-height="460"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')
  var $button = $('#button')

  function randomData() {
    var startId = ~~(Math.random() * 100)
    return {
        'id': startId,
        'name': 'test' + (startId),
        'price': '$' + (startId)
      }
  }

  $(function() {
    $table.on('post-body.bs.table', () => {
      document.querySelector('tr[data-index="1"]').
        children[0].
        classList.add('table-danger');
    })

    $button.click(function () {
      $table.bootstrapTable('insertRow', {
            index: "3",
            row: randomData(),
          })
    })
  })
</script>

赞(0）回复(0）举报 2022-12-25

我来回答

更新Bootstrap表上的颜色单元格

2条答案

相关问题

热门标签

最新问答