提供了一个清晰的创建表格的布局。下表列出了
Bootstrap
支持的一些表格元素：
表格类
下表样式可用于表格中：
<tr>,
<th>
和
<td>
类
下表的类可用于表格的行或者单元格：
基本的表格
如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加
class
.table，如下面实例所示：
<div
class="row">
<table
class="table">
<caption
class="text-center">基本表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
</tbody>
</table>
</div>
显示效果：
可选的表格类
除了基本的表格标记和
.table
class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。
条纹表格
通过添加
.table-striped
class，您将在
<tbody>
内的行上看到条纹，如下面的实例所示：
<div
class="row">
<table
class="table
table-striped">
<caption
class="text-center">条纹表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>苏州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
显示效果：
边框表格
通过添加
.table-bordered
class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：
<div
class="row">
<table
class="table
table-bordered">
<caption
class="text-center">边框表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>苏州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
显示效果：
悬停表格
通过添加
.table-hover
class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：
<div
class="row">
<table
class="table
table-hover">
<caption
class="text-center">悬停表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>苏州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
显示效果：
精简表格
通过添加
.table-condensed
class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
<div
class="row">
<table
class="table
table-condensed">
<caption
class="text-center">精简表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>苏州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
显示效果：
上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
这些类可以用到<tr>、<td>、<th>中，如下面实例所示：
<div
class="row">
<table
class="table">
<caption
class="text-center">上下文表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr
class="active">
<td>No.1</td>
<td>北京</td>
</tr>
<tr
class="success">
<td>No.2</td>
<td>上海</td>
</tr>
<tr
class="warning">
<td>No.3</td>
<td>苏州</td>
</tr>
<tr
class="danger">
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
显示效果：
响应式表格
通过把任意的
.table
包在
.table-responsive
class
内，您可以让表格水平滚动以适应小型设备（小于
768px）。当在大于
768px
宽的大型设备上查看时，您将看不到任何的差别。
<div
class="table-responsive">
<table
class="table">
<caption
class="text-center">响应式表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>苏州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
显示效果：
如果还想继续学习的话大家可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程
以上就是本文的全部内容，希望能够帮助大家更好的学习JS表格组件神器bootstrap
table。
很简单，最原始的用eval(str) str就是传入的字符串，之后可以以JS对象的方式使用了。比如A.04F172F2E5B911E2884BF46D04608124.Quantity = 14.eval是比较耗时的方法，你上网查下有更高性能的方法
1，Javascript操作table,tr,td ，代码如下：function messageSort() { --函数名var message=document.getElementById("message").value--添加的内容(下面有对应的html)if(name == "" ) return--如果添加为空,返回var row = document.createElement("tr")//创建tr的row.setAttribute("id", name)--设置row的属性. var cell = document.createElement("td")//创建tdcell.appendChild(document.createTextNode(name))//td里注入文本row.appendChild(cell)//将TD注入TRvar deleteButton = document.createElement("input")//这部分是添加删除button按钮deleteButton.setAttribute("type", "button")deleteButton.setAttribute("value", "删除")deleteButton.onclick = function () { deleteSort(name)}cell = document.createElement("td")cell.appendChild(deleteButton)//注入按钮row.appendChild(cell)//将TD注入TRdocument.getElementById("sortList").appendChild(row)//将TR注入到相应地方(sortList可以看下面html)var cell5 = document.createElement("td")cell.style.background="#ffffff"//背景颜色设置row1.style.color="#ffffff"//字体颜色设置cell5.style.display = "none" //ie不支持setAttribute("style", "display:none")// <td style="display:none" >dd</td>直接写TD是这样..cell5.appendChild(document.createTextNode(zdid))row.appendChild(cell5)}// 删除内容function deleteSort(id) {//这个函数为上面的删除button调用的var rowToDelete = document.getElementById(id)var sortList = document.getElementById("sortList")sortList.removeChild(rowToDelete)}</script></head><body><table border="0" cellspacing="0" width="400" bgcolor="#f5efe7"><tr><td height="20">增加内容:</td><td><input id="message" type="text"></td><td><a href="javascript:messageSort()">添加</a></td></tr></table><table border="1" width="400"><tr><td height="20" align="center">内容:</td><td>操作</td></tr><tbody id="sortList"></tbody></table></body>2，一般情况下定义一个效果良好的表格采用下面的属性定义方式代码：<table cellSpacing="0" cellPadding="0" border='1' bordercolor="black" style='border-collapse:collapsetable-layout: fixed'></table>当某个td中没有内容或者没有可见元素时，td的border也会消失。解决方案就是给table添加样式border-collapse:collapse 代码段：.text-overflow{ display:block/*内联对象需加*/ width:31emword-break:keep-all/* 不换行 */ white-space:nowrap/* 不换行 */ overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/ } 3，但对于表格table来讲是有些不同，代码段：table{ width:30emtable-layout:fixed/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ } td{ width:100%word-break:keep-all/* 不换行 */ white-space:nowrap/* 不换行 */ overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/ }
