网站建设资讯

NEWS

网站建设资讯

jquery行一行,jquery增加一行

jquery 选择表格中的一行

$("#maintable td").click(function(){

成都创新互联公司于2013年创立,先为东安等服务建站,东安等地企业,进行企业商务咨询服务。为东安企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

var row = $(this).parent("tr").prevAll().length+1;

var colum = $(this).prevAll().length+1;

alert('选中的是第'+row+'行,第'+colum+'列。');

$(this).parent("tr").attr("style","background-color:#FF0000");

});

用jquery怎么获取表格中的一行内容

一般都会在后台获得,比如这个表格的数据是用$list这个变量存储的,$list中每个元素都有id date title file四个字段,checkbox的name是id,现在写一个js方法用来将选中的复选框传到后台,需要使用一个按钮触发下面的方法

function fun(){

var arr = new Array();

$(":checked").each(function(){

arr[] = $(this).attr("name");

});

//然后用任意方法将arr传到后台

}

在后台根据传回来的id在$list中获得要你想要的数据。

上面是我觉得最简单的方法。

下面还有一个在页面里获得你要的数据的方法

将每一行数据都写在同一个div里,根据复选框的标示获得对应div内的数据

div name=“id”数据, (最后一列)input type="checkbox" name="id" //div

script

function fun(){

var arr = new Array();

var name = '';

$(":checked").each(function(){

name = $(this).attr("name");

arr[] = $("div[name=" + name + "]").html();

});

}

/script

如何通过jquery动态给表格添加一行?

比如设置table的id为tab

var trHTML = "trtd.../td/tr"

$("#tab").append(trHTML);//在table最后面添加一行

$("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行这样就可以进行动态的添加行了,至于你是通过什么事件来动态添加那就看你自己的意思了,通过button或者div之类的点击事件添加,只要把上面的两行代码放进去就ok,注意,要把var trHTML那行代码放进添加事件里面,不然不管点击多少下,都只能添加一行

$(function() {

$(":button").click(function() {

var tr = "trtdnew/td/tr";

//$("table").append(tr);

$("table tr:eq(2)").after(tr);

});

});

这是我测试用的代码,你可以运行看看

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的模块可以分为:入口模块、底层支持模块和功能模块。其核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

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行一行,jquery增加一行
本文URL:http://cdweb.net/article/dsigccc.html