如何重命名引导表的列

How to rename a column of a bootstrap table?

本文关键字：重命名      更新时间：2023-09-26

如何重命名引导表的列？ 我想在按下按钮时重命名列名称。如果有人知道，请帮助我:)

没有什么特别需要的，只需使用 jquery 在按钮click处理程序内.text()更改列名即可。

JS代码： 

$(this).text('NewCol');

现场演示 @ JSFiddle

你的问题不清楚。您可以添加您尝试过的代码来改进问题。

工作演示 

$(document).ready(function(){
    $('[type="button"]').click(function(){
        $('.table tr th').text('changed')
    });
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
      </tr>
      <tr>
        <td>Mary</td>
      </tr>
      <tr>
        <td>July</td>
      </tr>
    </tbody>
  </table>
</div>
<br/>
<input type="button" value="Change">

像这样：

<div>
    <table id="users" class="table table-bordered table-condensed">
        <tr><th>#</th><th>name</th><th>age</th></tr>
        <tr>
            <td>1</td>
            <td><a href="#" data-pk="1">Mike</a></td>
            <td>21</td>       
        </tr>
        
        <tr>
            <td>2</td>
            <td><a href="#" data-pk="2">John</a></td>
            <td>28</td>       
        </tr>        
        
        <tr>
            <td>3</td>
            <td><a href="#" data-pk="3">Mary</a></td>
            <td>24</td>       
        </tr>        
        
    </table>    
</div>

相关文章：