jquery 获取表格中当前单元格 td的索引值

<script type="text/javascript">

$(function(){

$("input")change(function(){

var curVal = $(this)val();

var prevVal = $(this)parent()prev("td")find("input")eq(0)val();

var nextVal = $(this)parent()next("td")find("input")eq(0)val();

alert("上一个文本框值:"+prevVal+"\n下一个文本框值:"+nextVal);

});

});

</script>

默认界面下除了原始的table外，还为table额外增加了搜索、列排序、分页及信息显示这些内容，如果不需要其中一个或多个可以通过以下设置隐藏

$('#myTable')DataTable({

   "paging": false,

   "ordering": false,

   "info": false,

   "searching": false,

});

paging： 控制分页是否开启，默认开启，开启后会显示表格左上角的每页行数选择和右下角的页码跳转

ordering： 控制是否进行排序，默认开启，且默认会对第一列数据进行排序

info： 控制是否显示表格左下角的信息，默认开启

searching： 控制是否显示表格右上角的搜索，默认开启

参考：Datatables最全使用案例

bootstrap-table 

示例

var ViewTableInit = function() {

   var oTableInit = new Object();

   //初始化Table

   oTableInitInit = function(code) {

       $('#tb_view')bootstrapTable({

           url: '/monitor/monitor/getviewpark_code='+code, //请求后台的URL（）

           method: 'get', //请求方式（）

           toolbar: '#viewtoolbar', //工具按钮用哪个容器

           striped: true, //是否显示行间隔色

           cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）

           pagination: true, //是否显示分页（）

           sortable: false, //是否启用排序

           sortOrder: "asc", //排序方式

           queryParams: oTableInitqueryParams, //传递参数（）

           sidePagination: "server", //分页方式：client客户端分页，server服务端分页（）

           pageNumber: 1, //初始化加载第一页，默认第一页

           pageSize: 9, //每页的记录行数（）

           pageList: [10, 25, 50, 100], //可供选择的每页的行数（）

           search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

           strictSearch: true,

           showColumns: true, //是否显示所有的列

           showRefresh: true, //是否显示刷新按钮

           minimumCountColumns: 2, //最少允许的列数

           clickToSelect: false, //是否启用点击选中行

           uniqueId: "ID", //每一行的唯一标识，一般为主键列

           showToggle: true, //是否显示详细视图和列表视图的切换按钮

           cardView: false, //是否显示详细视图

           detailView: false, //是否显示父子表

           columns: [{

               field: 'ParkingCode',

               title: '停车场编码',

               align: 'center'

           }, {

               field: 'ParkingName',

               title: '停车场名称',

               align: 'center'

           }, {

               field: 'monitor_type',

               title: '监控类型',

               formatter: typeFormatter,

               align: 'center'

           }, {

               field: 'monitor_result_status',

               align: 'center',

               formatter: UpNetWorkFormatter,

               title: '监控结果状态'

           }, {

               field: 'monitor_ip',

               align: 'center',

               title: 'ip或域名'

           },{

               field: 'create_time',

               title: '更新时间',

               align: 'center',

               formatter:dateFormatter

           }]

       });

   };

   oTableInitrefresh = function(code){

       $('#tb_view')bootstrapTable("refresh", {url:'/monitor/monitor/getviewpark_code='+code});

   }

   //得到查询的参数

   oTableInitqueryParams = function(params) {

       var temp = {

           limit: paramslimit, //页面大小

           offset: paramsoffset, //页码

           res: decodeURI(decodeURI(paramssearch))

       };

       return temp;

   };

   return oTableInit;

};

效果如下图

如果 有什么问题可以私信我

本文实例讲述了jQuery实现模糊查询的方法。分享给大家供大家参考，具体如下：

需求：list列表内容很多，用户需要找出列表内容中的某些条目，只有当与用户输入值匹配的条目才显示出来。（后台无分页，直接异步接口返回数据添加形成的内容列表）

虽然可以通过传参再调用查询出来，但这里主要记录的是前端处理进行模糊查询而无需再次调用接口的实现方法。

html部分：

<div

class="search-form">

<input

type="text"

placeholder="请输入关键词">

<span

class="icon-clear"></span>

</div>

<div

class="content">

<div

class="title

row

no-gutter">

<div

class="col-20">列表一</div>

<div

class="col-20">列表二</div>

<div

class="col-20">列表三</div>

<div

class="col-20">列表四</div>

<div

class="col-20">列表五</div>

</div>

<div

class="list-content">

<ul>

<li>

<div

class="code">00001</div>

<div

class="name">内容1</div>

<div>内容2</div>

<div>内容3</div>

<div>内容4</div>

</li>

<li>……</li>

</ul>

</div>

</div>

js部分：

queryList:

function(){

$("search-input")on("input

propertychange",

function()

{

var

queryStr

=

$trim($("search-input")val());

if(queryStr

===

''){

$("list-content

li")show();

}else{

//

以下是匹配某些列的内容，如果是匹配全部列的话就把find()和parent()去掉即可

$("list-content

li")hide()find("code,

name")filter(":contains('"+queryStr+"')")parent("li")show();

//$("list-content")refresh();

//重新刷新列表把隐藏的dom结构去掉。

}

});

}

分析：以上即实现了前端js的模糊查询功能啦，哈哈。代码中监听事件中多加了input，据说是为兼容iOS的，具体没测试，有哪位大神测试了可以告知一声哈，谢谢了。

还有个问题就是，以上实现方法，当列表内容多大几千条数目或者更多时，表单输入时会出现卡顿的情况，因为要通过js *** 作大量的DOM结构啊（隐藏或显示），PC上或许情况还没有那么严重，在手机上测试时那真的是“怎一个卡字了得”，如果哪位大神有更好的法子，还望加以完善！

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table) *** 作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:jQuery实现select模糊查询（反射机制）jQuery基于xml格式数据实现模糊查询及分页功能的方法jQuery实现id模糊查询的小例子jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例jquery

zTree异步加载、模糊搜索简单实例分享jquery

ztree实现模糊搜索功能jquery

easyui

combobox模糊过滤(示例代码)jQuery实现多级联动下拉列表查询框JQuery+Ajax实现数据查询、排序和分页功能jquery处理页面d出层查询数据等待 *** 作实例