bootstrap-table:th - 在左边添加一个图标

时间:2016-12-27 21:23:34

标签: javascript css bootstrap-table

任何人都知道如何在bootstrap-table标题中向左边添加内容?如下图所示,我想添加一个图标(问号或其他)作为可点击链接。

enter image description here

jsFIDDLE

<table id="summaryTable">
    <thead>
        <tr>
            <th data-field="id" data-align="center" data-width="20px" >id</th>
            <th data-field="name" data-align="center" data-sortable="true">Name</th>
            <th data-field="type" data-align="center" data-sortable="true">type</th>
        </tr>
    </thead>
</table>

1 个答案:

答案 0 :(得分:1)

您可以为每个th添加元素:

  $('#summaryTable thead th').each(function() {
    s = $('<span style="position: absolute; left: 4px; top: 8px; cursor: pointer;">?</span>')
    s.click(function(e) {
        e.stopPropagation();
        alert('Question mark clicked')
    });
    $(this).append(s)
  })
  

请注意e.stopPropagation();以确保点击问号不会导致点击整个TH

这是你的jsfiddle的一个分支:
https://jsfiddle.net/dekelb/e403uvuh/