jquerytable,jquerytable增删改查

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

怎么用jquery获取table里的内容

var tableBody = $("table body");//获取table的body对象

var firstRow = tableBody.children().eq(0);//获取第一行

var columns = firstRow.children();//获取第一行的所有列

var columnValue1 = columns.eq(0).html();//获取第一列

var columnValue2 = columns.eq(1).html();//获取第二列

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、然后这样就完成了。


分享名称:jquerytable,jquerytable增删改查
网页链接:http://lszwz.com/article/hosgdi.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉,无效全额退款