正文
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
相关问答
Q1: 怎么用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();//获取第二列
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、然后这样就完成了。
