四川盐亭网站制作公司

tablejquery的简单介绍

jquery 操作table

根据你的html,帮你写了段代码.获取的值存到三个数组中.

在禹王台等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站设计制作、成都网站建设 网站设计制作按需策划,公司网站建设,企业网站建设,品牌网站制作,营销型网站建设,成都外贸网站制作,禹王台网站建设费用合理。

我是根据对象的class属性来获取对象.进行获取对象的值或属性.

jquery的选择器非常强大,有非常多的选择对象的方式,这只是其中一种.

你可以找到更多的方法来达到你的目的.

html

meta http-equiv="Content-type" content="text/html; charset=utf-8" /meta

head

title

demo

/title

script src="jquery.js" type="text/javascript"/script

script

var date_arr = new Array();

var chk_arr = new Array();

var input_arr = new Array();

function get_td_value(){

$(".date").each(function(){

date_arr.push( $(this).text());//存入数组中.

});

alert(date_arr.length);

}

function get_check_value(){

$(".chk").each(function(){

if($(this).attr('checked')) chk_arr.push( $(this).attr('id'));

});

alert(chk_arr.length);

}

function get_input_value(){

$(".for_input").each(function(){

input_arr.push( $(this).val());

});

alert(input_arr.length);

}

/script

/head

body

div id="showTime"

table class='itable' width='100%' id='timetable'

tr

th日期/th

th选中 input id="checkAll" type="checkbox" //th

th人数限制/th

/tr

tr

td align="center" class="date"2010-4-1/td

td align="center" input id="cb1" name="checkbox_name" type="checkbox" class="chk" //td

td align="center"input id="txt1" type="text" name="text" class="for_input"//td

/tr

tr

td align="center" class="date"2010-4-2/td

td align="center" input id="cb2" name="checkbox_name" type="checkbox" class="chk" //td

td align="center"input id="txt2" type="text" name="text" class="for_input"//td

/tr

tr

td align="center" class="date"2010-4-3/td

td align="center" input id="cb3" name="checkbox_name" type="checkbox" class="chk"//td

td align="center"input id="txt3" type="text" name="text" class="for_input"//td

/tr

tr

td align="center"input value="第一列" type="button" onclick="get_td_value();"/td

td align="center"input value="第二列" type="button" onclick = "get_check_value();"/td

td align="center"input value="第三列" type="button" onclick = "get_input_value();"/td

/tr

/table

/div

/body

/html

table表格jquery分页怎么写

script language="jscript" type="text/javascript" 

var pageIndex = 1; //当前页数 

$(function(){ 

GetPageCount();//获取分页数量以及总的记录条数 

$("#load").hide();//隐藏loading提示 

$("#template").hide();//隐藏模板 

ChangeState(0,1);//设置翻页按钮的初始状态 

bind();//绑定第一页的数据 

//第一页按钮click事件 

$("#first").click(function(){ 

pageIndex = 1; 

ChangeState(0,1); 

bind(); 

}); 

//上一页按钮click事件 

$("#previous").click(function(){ 

pageIndex -= 1; 

ChangeState(-1,1); 

if(pageIndex = 1){ 

pageIndex = 1; 

ChangeState(0,-1); 

} 

bind(); 

}); 

//下一页按钮click事件 

$("#next").click(function(){ 

pageIndex += 1; 

ChangeState(1,-1); 

if(pageIndex=pageCount) 

{ 

pageIndex = pageCount; 

ChangeState(-1,0); 

} 

bind(pageIndex); 

}); 

//最后一页按钮click事件 

$("#last").click(function(){ 

pageIndex = pageCount; 

ChangeState(1,0); 

bind(pageIndex); 

}); 

//每页显示记录条数select事件 

$("#pageSize").change(function(){ 

bind(); 

}) 

}); 

//AJAX方法取得数据并显示到页面上 

function bind(){ 

$("#load").show(); 

var pageSize = $("#pageSize").val(); 

$.ajax({ 

type: "get",//使用get方法访问后台 

dataType: "json",//返回json格式的数据 

url: "%=basePath%actionSmUser.do?method=listUser2",//要访问的后台地址 

data: "pageIndex=" + pageIndex+"pageSize="+pageSize,//要发送的数据 

complete : function(msg){//msg为返回的数据，在这里做数据绑定 

$("[id=ready]").remove(); 

var data = eval("("+msg.responseText+")"); 

$.each(data, function(i, n){ 

var row = $("#template").clone(); 

row.find("#userId").text(n.userId); 

row.find("#userName").text(n.userName); 

row.find("#depId").text(n.depId); 

row.find("#createTime").text(n.createTime); 

if(n.createTime !== undefined) row.find("#createTime").text(n.createTime); 

row.find("#creator").text(n.creator); 

row.find("#menusId").text(n.menusId); 

row.find("#isValid").text(n.isValid); 

row.attr("id","ready");//改变绑定好数据的行的id 

row.appendTo("#datas");//添加到模板的容器中 

}); 

$("[id=ready]").show(); 

SetPageInfo(); 

} 

}); 

} 

function ChangeDate(date){ 

return date.replace("-","/").replace("-","/"); 

} 

//设置第几页/共几页的信息 

function SetPageInfo(){ 

var pageCount = $("#pageCount").val(); 

var totalCount = $("#totalCount").val(); 

var pageSize = $("#pageSize").val(); 

$("#pageinfo").html(" 第input class='default_pgCurrentPage' id='pageIndex' type='text' value='"+pageIndex+ 

"' style='width: 30px' / 页" + "/" +"共 "+pageCount+"页"+ 

" 检索到 "+totalCount+"条记录，显示第 "+(pageIndex*pageSize-pageSize)+" 条 - 第 "+(pageIndex*pageSize)+" 条记录"); 

} 

//AJAX方法取得分页总数 

function GetPageCount(){ 

var pageSize = $("#pageSize").val(); 

$.ajax({ 

type: "get", 

dataType: "text", 

url: "%=basePath%actionSmUser.do?method=getPageCount", 

data: "pageSize="+pageSize , 

async: false, 

success: function(msg){ 

var data = eval("("+msg+")"); 

$("#pageCount").val(data[0].pageCount); 

$("#totalCount").val(data[0].totalCount); 

} 

}); 

} 

//改变翻页按钮状态 

function ChangeState(state1,state2){ 

$("#first").attr("class","default_pgFirst default_pgBtn"); 

$("#previous").attr("class","default_pgPrev default_pgBtn"); 

$("#next").attr("class","default_pgNext default_pgBtn"); 

$("#last").attr("class","default_pgLast default_pgBtn"); 

if(state1 == 1) { 

document.getElementById("first").disabled = ""; 

document.getElementById("previous").disabled = ""; 

}else if(state1 == 0){ 

document.getElementById("first").disabled = "disabled"; 

document.getElementById("previous").disabled = "disabled"; 

$("#first").attr("class","default_pgFirstDisabled default_pgBtn"); 

$("#previous").attr("class","default_pgPrevDisabled default_pgBtn"); 

}if(state2 == 1){ 

document.getElementById("next").disabled = ""; 

document.getElementById("last").disabled = ""; 

}else if(state2 == 0){ 

document.getElementById("next").disabled = "disabled"; 

document.getElementById("last").disabled = "disabled"; 

$("#next").attr("class","default_pgNextDisabled default_pgBtn"); 

$("#last").attr("class","default_pgLastDisabled default_pgBtn"); 

} 

} 

/script 

html页面代码如下： 

复制代码代码如下:

body 

div 

div 

br / 

table id="datas" align="center" class="listtable" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" style="margin-top:5px;" 

tr class="fixheader" 

th width="14%" 

用户ID/th 

th width="14%" 

用户名称/th 

th width="14%" 

所在科室/th 

th width="14%" 

创建时间/th 

th width="14%" 

创建人/th 

th width="14%" 

菜单集名称/th 

th width="14%" 

是否有效/th 

/tr 

tr id="template" height="22px" bgcolor="#F9FDFF" onmouseover="javascript:this.style.backgroundColor='#FFFFCC'; return true;" onMouseOut="javascript:this.style.backgroundColor='#F9FDFF'; return true;" 

td id="userId" class="tdc" 

/td 

td id="userName" class="tdc" 

/td 

td id="depId" class="tdc" 

/td 

td id="createTime" class="tdc" 

/td 

td id="creator" class="tdc" 

/td 

td id="menusId" class="tdc" 

/td 

td id="isValid" class="tdc" 

/td 

/tr 

/table 

/div 

div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red" 

LOADING.... 

/div 

div class="default_pgContainer"  

div class="default_container" 

div class="default_pgPanel" id="skinDiv" 

table class="default_pgToolbar" 

tr 

td class="black_pgCurrentPage" 

select id="pageSize" name="pageSize" 

option selected="selected" value="10"10/option 

option value="20"20/option 

option value="30"30/option 

/select 

/td 

td 

div id="first" class="default_pgFirst default_pgBtn" / 

/td 

td 

div id="previous" class="default_pgPrev default_pgBtn" / 

/td 

td class="default_separator" 

/td 

td 

div id="next" class="default_pgNext default_pgBtn" / 

/td 

td 

div id="last" class="default_pgLast default_pgBtn" / 

/td 

td class="default_separator" 

/td 

td 

span id="pageinfo"/span 

/td 

/tr 

/table 

/div 

/div 

/div 

/div 

div id="test"/div 

input type="hidden" id="pageCount" style="width: 45px" / 

input type="hidden" id="totalCount" style="width: 45px" / 

/body 

后台action中代码如下： 

复制代码代码如下:

//分页获取用户信息 

public void listUser2(ActionMapping mapping, ActionForm form, 

HttpServletRequest request, HttpServletResponse response){ 

RequestTool tool = new RequestTool(request); 

Integer pageSize = tool.getIntParameter("pageSize"); 

Integer pageIndex = tool.getIntParameter("pageIndex"); 

ResultPage res = serviceSmUserImpl.findAllSmUsers(pageIndex, pageSize); 

ListSmUser smUserList = (ListSmUser)res.getResult(); 

JSONArray array = new JSONArray(); 

JSONObject object ; 

for(SmUser user:smUserList){ 

object = new JSONObject(); 

object.put("userId", user.getUserId()); 

object.put("userName",user.getUserName()); 

object.put("depId", user.getOrganCode()); 

object.put("createTime", user.getCreateTime()); 

object.put("creator", user.getCreator()); 

object.put("menusId", user.getMenusId()); 

object.put("isValid", (user.getValid().equals("1")?"有效":"无效")); 

array.add(object); 

} 

AjaxTool.returnAjaxResponse(response, array.toJSONString()); 

} 

//获取总的记录数和总页数 

public void getPageCount(ActionMapping mapping, ActionForm form, 

HttpServletRequest request, HttpServletResponse response){ 

RequestTool tool = new RequestTool(request); 

int pageSize = tool.getIntParameter("pageSize"); 

ListPOJO pojos = serviceSmUserImpl.findAll(); 

int pageCount = pojos.size()% pageSize  0 ? (pojos.size()/ pageSize+1):(pojos.size()/ pageSize); 

JSONArray array = new JSONArray(); 

JSONObject object = new JSONObject(); 

object.put("pageCount", pageCount); 

object.put("totalCount", pojos.size()); 

array.add(object); 

AjaxTool.returnAjaxResponse(response,array.toJSONString()); 

}

JQUERY方法给TABLE动态增加行

1、首先输入下方的代码：

%@ page language="java" pageEncoding="UTF-8"%

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

html

head

title利用jquery给指定的table添加一行、删除一行/title

meta http-equiv="pragma" content="no-cache"

meta http-equiv="cache-control" content="no-cache"

meta http-equiv="expires" content="0"

meta http-equiv="keywords" content="keyword1,keyword2,keyword3"

meta http-equiv="description" content="This is my page"

script type="text/javascript"

src="%=request.getContextPath()%/js/jquery-1.5.1.js"/script

script type="text/javascript"

2、然后在输入下方的代码：

////////添加一行、删除一行封装方法///////

/**

* 为table指定行添加一行

*

* tab 表id

* row 行数，如：0-第一行 1-第二行 -2-倒数第二行 -1-最后一行

* trHtml 添加行的html代码

*

*/

function addTr(tab, row, trHtml){

//获取table最后一行 $("#tab tr:last")

//获取table第一行 $("#tab tr").eq(0)

//获取table倒数第二行 $("#tab tr").eq(-2)

var $tr=$("#"+tab+" tr").eq(row);

if($tr.size()==0){

alert("指定的table id或行数不存在！");

return;

}

$tr.after(trHtml);

}

3、然后在输入下方的代码：

function delTr(ckb){

//获取选中的复选框，然后循环遍历删除

var ckbs=$("input[name="+ckb+"]:checked");

if(ckbs.size()==0){

alert("要删除指定行，需选中要删除的行！");

return;

}

ckbs.each(function(){

$(this).parent().parent().remove();

});

}

/**

* 全选

*

* allCkb 全选复选框的id

* items 复选框的name

*/

function allCheck(allCkb, items){

$("#"+allCkb).click(function(){

$('[name='+items+']:checkbox').attr("checked", this.checked );

});

}

////////添加一行、删除一行测试方法///////

$(function(){

//全选

allCheck("allCkb", "ckb");

});

function addTr2(tab, row){

var trHtml="tr align='center'td width='30%'input type='checkbox' name='ckb'/

/tdtd width='30%'地理/tdtd width='30%'60/td/tr";

addTr(tab, row, trHtml);

}

function delTr2(){

delTr('ckb');

}

4、然后输入下方的代码：

/script

/head

body

table border="1px #ooo" id="tab" cellpadding="0"

cellspacing="0" width="30%"

tr align="center"

td width="30%"input id="allCkb" type="checkbox"//td

td width="30%"科目/td

td width="30%"成绩/td

/tr

tr align="center"

td width="30%"/td

td width="30%"语文/td

td width="30%"80/td

/tr

/table

input type="button" onclick="addTr2('tab', -1)" value="添加"

input type="button" onclick="delTr2()" value="删除"

/body

/html

5、然后这样就完成了。

jQuery操作table表格

一、数据准备

二、操作

//1.鼠标移动行变色

$("#table1 tr").hover(function(){

$(this).children("td").addClass("hover")

},function(){

$(this).children("td").removeClass("hover")

})

$("#table2 tr:gt(0)").hover(function() {

$(this).children("td").addClass("hover");

}, function() {

$(this).children("td").removeClass("hover");

});

//2.奇偶行不同颜色

$("#table3 tbody tr:odd").css("background-color", "#bbf");

$("#table3 tbody tr:even").css("background-color","#ffc");

$("#table3 tbody tr:odd").addClass("odd")

$("#table3 tbody tr:even").addClass("even")

//3.隐藏一行

$("#table3 tbody tr:eq(3)").hide();

//4.隐藏一列

$("#table5 tr td::nth-child(3)").hide();

$("#table5 tr").each(function(){$("td:eq(3)",this).hide()});

//5.删除一行

// 删除除第一行外的所有行

$("#table6 tr:not(:first)").remove();

//6.删除一列

// 删除除第一列外的所有列

$("#table6 tr td:not(:nth-child(1))").remove();

//7.得到（设置）某个单元格的值

//设置table7,第2个tr的第一个td的值。

$("#table7 tr:eq(1) td:nth-child(1)").html("value");

//获取table7,第2个tr的第一个td的值。

$("#table7 tr:eq(1) td:nth-child(1)").html();

//8.插入一行：

//在第二个tr后插入一行

$("插入3插入插入插入").insertAfter($("#table7 tr:eq(1)"));

//删除指定行（第二行） $("#table3 tr:gt(0):eq(1)").remove();

(2)删除列，比如删除表格中的第二列：

//eq:获取子元素索引从 0 开始，先删除表头$("#table3 tr th:eq(1)").remove();//nth-child:获取子元素从 1 开始$("#table3 tr td:nth-child(2)").remove();

(3)删除其它行，比如第二行之外的所有行：

$("#table3 tr:gt(0):not(:eq(1))").remove();

(4)删除其它列，比如第二列之外的所有列：

//先删除表头$("#table3 tr th:not(:eq(1))").remove();$("#table3 tr td:not(:nth-child(2))").remove();

(5)隐藏行，比如隐藏第二行：

$("#table3 tr:gt(0):eq(1)").hide();//或者//$("#table3 tr:gt(0):eq(1)").css("display", "none")//显示//$("#table3 tr:gt(0):eq(1)").css("display", "");

(6)隐藏列，比如隐藏第二列：

$("#table3 tr th:eq(1)").hide();

$("#table3 tr td:nth-child(2)").hide();

//或者

//$("#table3 tr th:eq(1)").css("display", "none");

//$("#table3 tr td:nth-child(2)").css("display", "none");

//显示

//$("#table3 tr th:eq(1)").css("display", "");

//$("#table3 tr td:nth-child(2)").css("display", "");

jquery 获取 table 总行数：

$("table tr").size();

var hang = $("#g").find("tr").length;

jquery 获取 table 总列数：

$("table td").size();

var lie = $("#g").find("tr").find("td").length-1;


新闻名称：tablejquery的简单介绍
当前URL：http://scyanting.com/article/hoijhj.html

其他资讯