正文
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
相关问答
Q1: 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());
}
Q2: 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、然后这样就完成了。
Q3: 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;
