十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
$("#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");
});
一般都会在后台获得,比如这个表格的数据是用$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
比如设置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+等。
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、然后这样就完成了。