Table下面可以有thead和tbody两个分组对象，某些时候可以代替div使用，比如实现某部份表格隐藏。
tr是行，th或者td是列，这些对象构成表格阵列
每一个...就是我们所说得rows[id]
每一个...或者...就是cells[id]了
对于使用table来作为整个分组，我个人更喜欢tbody来代替table.
在table生命周期，只要我们知道tbody预设的id,我们就可以通过以下js代码获得这个tbody
document.getElementById(tbodyID);
js是弱类型语言，我们可以通过var一个对象来作为这个tbody的标记,然后就可以引用rows和cells了
var tbodyObj = document.getElementById(tbodyID);
tbodyObj.rows[rowID].cells[colID].innerText = "abcd";
tbodyObj.rows[rowID].cells[colID].innerHTML = "abcd
(innerHTML是指html代码，innerText是指显示的text);
通过以下例子来说说rows和cells的一些应用
代码：
<html>
<head>
<title>JS日积月累001 - rows 和 cells的使用</title>
<script type="text/javascript">
function validForm(curForm, bodyName){
var bodyObj = document.getElementById(bodyName);
var rowObj = null;
var cellObj = null;
if (bodyObj == null){
return false;
}
// 引用rows
for (var i = 0; i < bodyObj.rows.length; i ++){
rowObj = bodyObj.rows[i];
// 带*的必须输入，引用cells
if (rowObj.cells[0].innerText.indexOf("*") > 0){
if (rowObj.cells[1].childNodes[0].value == ""){
alert(rowObj.cells[0].innerText.replace(" * :", "") + "不能为空！");
return false;
}
}
}
alert("Pass validation");
//curForm.submit();
}
</script>
</head>
<body>
<form action="" method="post" name="loginFrm">
<table>
<tbody id="validBody">
<tr>
<td align="right">用户名 <font color="red">*</font> :</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td align="right">密码 <font color="red">*</font> :</td>
<td><input type="password" name="username" /></td>
</tr>
<tr>
<td align="right">子系统 <font color="red">*</font> :</td>
<td>
<select name="systemname">
<option value="">---请选择---</option>
<option value="HR">人力资源系统</option>
<option value="PUR">采购系统</option>
<option value="SAL">销售系统</option>
</select>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<input type="button" value="提交" name="submit" onclick="validForm(this.form, 'validBody')"/>
<input type="reset" value="Reset" name="reset"/>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
分享到：
相关推荐
bootstrap-table-reorder-rows.js ，bootstraptable行拖动
综上所述，"bootstrap-table-reorder-rows.js.zip" 包含的资源主要服务于 Bootstrap Table 的行内编辑和行重排功能，开发者可以借助这些资源轻松地为网页中的表格添加交互性和灵活性，提高用户在数据管理方面的效率...
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
本文包含两个源代码：使用 childNodes 操作表格列着色、使用 rows,cells 操作表格列着色。两种着色方式有什么区别？具体分析请参阅作者博客：http://blog.csdn.net/defonds/archive/2010/07/17/5741214.aspx。
Angular-ui-grid-draggable-rows.zip,HTML5拖放功能，用于Angular UI GridDragable Rows插件，用于UI ...它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。
NX二次开发UF_DRF_ask_number_rows_in_callout 函数介绍，Ufun提供了一系列丰富的 API 函数，可以帮助用户实现自动化、定制化和扩展 NX 软件的功能。无论您是从事机械设计、制造、模具设计、逆向工程、CAE 分析等...
python python_leetcode题解之1337_The_K_Weakest_Rows_in_a_Matrix.py
使用可选模型重新捆绑解压的 Browserify 包 安装 从npm获取 npm install repack-rows --save 用法 var unpack = require ( 'browser-unpack' ) ; var repack = require ( 'repack-rows' ) ; var rows = unpack ( ...
要实现“bootstraptable-reorder-columns”功能，首先你需要在项目中引入BootstrapTable的基本库以及该插件的JavaScript和CSS文件。通常，这些文件可以从BootstrapTable的官方GitHub仓库或者CDN获取。确保正确地链接...
s=round(rand(1, cols-rows)); %产生H矩阵 H=genH(rows,cols); %使用H矩阵进行LDPC编码 [u,P,rearranged_cols]=ldpc_encode(s,H); SNR=10; amp=1;%量化幅度 tx_waveform=bpsk(u,amp);%量化 rx_waveform=awgn(tx_...
Unity Vertex Animation Baker-Muilt-Rows 从这个项目修改： : 附加功能 烤的Muilt-Rows动画纹理。 添加填充像素以修复Muilt-Rows动画纹理“双线性”错误的像素采样。 使用MaterialPropertyBlock设置随机开始...
在DevExtreme中，JavaScript代码通常会包含对DataGrid组件的配置、事件监听和数据操作。 虽然提供的压缩包文件"obsolete-datagrid-how-to-reorder-rows-using-drag-and-drop-t152596-19.2.11-"可能包含了一个过时的...
`Filter-Table-Rows`项目就是针对这一需求而设计的一个示例，它主要展示了如何使用JavaScript来实现表格数据的动态过滤功能。这个功能在很多场景下都非常实用，比如用户在浏览大量数据时，可以通过输入关键词快速...
bootstraptable拖拽js 包含 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
Bootstrap 3 是一个广泛使用的前端开发框架，它简化了网页设计和响应式布局的实现。在Bootstrap 3中，"行（Rows）"是构建网格系统的基础，它帮助开发者创建整齐、灵活的页面布局。本教程将深入讲解如何利用Bootstrap...
bootstrap table 拖拽所需的js，包含bootstrap-table-reorder-rows.js、bootstrap-table-reorder-rows.css、jquery.tablednd.min.js
总结起来，"table拖拽js"是BootstrapTable的一个强大特性，通过引入`bootstrap-table-reorder-rows.js`扩展和设置相关数据属性，我们可以轻松地实现用户友好的拖放排序功能。结合适当的事件监听和后端处理，可以创建...
本文实例为大家分享了BootStrap table实现表格行拖拽的具体代码，供大家参考，具体内容如下 不上图了 首先还是得添加三个文件，自己上网搜搜...link href=~/Content/bootstrap-table/bootstrap-table-reorder-rows.css
sheet Cells[r + rowIndex c + columnIndex] PutValue dt Rows[r][c] ToString ; } } } 导出 public Boolean DatatableToExcel DataTable dt int rowIndex int columnIndex { Boolean yn false; try { ...
实现bootStarp Table 表格行拖拽所需js, table属性 onReorderRowsDrag: function(table, row) { //取索引号 dragbeforeidx = $(row).attr("data-index"); }, //拖拽完成后的这条数据，并且可以获取这行数据的...