当前位置:首页 > 编程教程 > jQuery技术文章 > jquery实现select选中行、列合计示例

实例详解jquery实现select选中行、列合计

  • 发布时间:
  • 作者:码农之家
  • 点击:174

这篇文章主要知识点是关于jquery、select、行、列合计、jQuery实现Select下拉列表进行状态选择功能 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战案例精粹
  • 类型:jQuery大小:272 MB格式:PDF作者:吴绍兴//李勇//明廷
立即下载

jquery实现select选中行、列合计示例

Jquery 方法
 

$(
function () {

//页面加载时计算人员统计表合计值
calcSum();

});

//合计行计算
/*
以合计行为中间变量
每个单元格与该列合计行相加
得到每列合计
*/
function trVisible(chk, index) {

var disValue = $("#Tr" + index).css("display");
if (chk.checked) {

$("#Tr" + index).css("display", "block");
}
else {
$("#Tr" + index).css("display", "none");
}
calcSum();
}
function calcSum() {

//合计行赋初始值0
$("#trSum").each(function () {
$(this).find("td").each(function () {
if ($(this).index() != 0) {
$(this).text("0");
}
});
});

$("#tabrytj").find("tr").each(function () {
var trDis = $(this).css("display");
//隐藏行不参与计算
if (trDis == "block") {
$(this).find("td").each(function () {
var index = $(this).index();
if (index >= 1) {
var tdValue = $("#trSum").find("td:eq(" + index + ")").text();
//totalSum += parseFloat($(this).text());
$("#trSum").find("td:eq(" + index + ")").text(parseFloat(tdValue) + parseFloat($(this).text()));
}
});
}
});


}

html语句
 

<table>
<tr>
<td>分公司</td>
<td>
<select>
<option>
华南分公司
</option>
</select>
</td>
<td><input type="checkbox" onclick="trVisible(this,1)" name="chk1" id="chk1" checked="checked" />张1</td>
<td><input type="checkbox" onclick="trVisible(this,2)" checked="checked" />张2</td>
<td><input type="checkbox" onclick="trVisible(this,3)" checked="checked" />张3</td>
<td><input type="checkbox" onclick="trVisible(this,4)" checked="checked" />张4</td>
<td><input type="checkbox" onclick="trVisible(this,5)" checked="checked" />张5</td>
<td><input type="checkbox" onclick="trVisible(this,6)" checked="checked" />张6</td>
</tr>
</table>



<div>
<table border="0" class="tableinfo" id="tabrytj">
<tr id="Tr1" >
<td>张1 </td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
</tr>
<tr id="Tr2" >
<td>张2 </td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
</tr>
<tr id="Tr3" >
<td>张23 </td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
<td>124536</td>
</tr>
<tr id="trSum">
<td></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</div>

jQuery实现Select下拉列表进行状态选择功能

场景:

eg:在管理一篇博文时,因博文的管理有一列叫:状态的列,该列有诸多状态,如:正常,待审核,删除等...  此时,若使用Select下拉列表进行状态选择,并在选中具体项值后,通过Ajax异步提交,在效果及体验上就能得到更大化的体验。

下拉列表例子如下:

<select id="status">
 <option value="0" >待审核</option>
 <option value="1" >未通过审核</option>
 <option value="2" >制作中</option>
 <option value="3">制作完成</option>
 <option value="4" >发布</option>
 <option value="5">暂停</option>
 <option value="6">删除</option>
</select>

错误示范:

 $("select#status").click(function(){
 console.log($(this).val());
 });

若通过click事件执行,则在点击下拉列表的首次便会触发一次Ajax请求,这样并不符合逻辑,故不能使用click事件作为下拉列表选中具体值的做法。

正确示范:

 $("select#status").change(function(){
 console.log($(this).val());
 });

W3SCHOOL  对change事件的诠释如下:

定义和用法

当元素的值发生改变时,会发生 change 事件。

该事件仅适用于文本域(text field),以及 textarea 和 select 元素。

change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。

注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

通过以上,能清楚明白,当对于Select下拉列表时,应该使用Change事件。

补充:

因为页面翻页也是使用Ajax技术进行异步处理,当翻页后,原写法将失效,此时应该使用如下代码进行执行:

 $(document).on("change",'select#status',function(){
 console.log($(this).val());
 });

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持码农之家!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

select选中行、列合计 相关电子书
学习笔记
网友NO.524731

jquery模拟SELECT下拉框取值效果

jquery模拟SELECT框,效果图如下: !DOCTYPE html html lang="en" head titlejquery模拟SELECT框/title meta charset="utf-8" style body{padding:0;margin:0;font-size:12px;} ul,li{list-style:none;padding:0;margin:0;} #dropdown{width:186px; margin:100px auto; position:relative} .input_select{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px; border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat rightright 4px; color:#807a62; } #dropdown ul{width:184px; background:#e8f5fe; margin-top:2px; border:1px solid #a9c9e2; position:absolute; display:none} #dropdown ul li{height:24px; line-height:24px; text-indent:10px} #dropdown ul li a{display:block; height:24px; color:#807a62; text-decoration:none} #dropdown ul li a:hover{background:#c6dbfc; color:#369} #result{margin-top:10px;text-align:center} /style script type="text/javascript" src="http://jt.875.cn/js/jquery.js"/script script type="text/javascript" $(function(){ $(".input_select").click(fun……

网友NO.969010

jQuery模拟实现的select点击选择效果【附demo源码下载】

本文实例讲述了jQuery模拟实现的select点击选择效果。分享给大家供大家参考,具体如下: 有时候有些HTML元素无法让我们用样式控制进行控制,但是射鸡师或是客户的需求就是需要这种效果,还要让每个浏览器都显示同样的效果,这时候就会让我们这些所谓的前端攻城师很蛋疼,客户会认为交了点钱不让你折腾些东西,以为你是没做事的。面对这些对技术一窍不通的客户,技术对于他们来说就是一坨屎,以为我们都是用意念来写代码做程序的,所以都把我们的劳动成果看作是廉价得像是简单的拉出一泡屎而已。 虽然很喜欢什么都没有修饰的默认效果,但是又不得不面对这些客户蛋疼的效果和要求,所以不得不折腾几个来回总不满足,HTML里面,不可以样式控制的元素恐怕也为数不多,select是其中的一个,,所以今天也来折腾一下这个比较喜欢自由不爱……

网友NO.992380

利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)

这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至。 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果。 3.后台上传功能。 那么这一次,只谈[放大]或[缩小]。[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中)。 ["区域":是宽*高,也就是面积;] ["放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数] 一、怎么能放大或者缩小图片的局部? 局部放大:实质是将图片整个放大,即把图片的宽度和高度改变大,然后将放大后的图片,在一个固定大小(当然是比原图小的框)的框中,显示出来。 局部放大:实质是将图片整个缩小,即把图片的宽度和高度改变小,然后将缩小后的图片,在一个固定大小(当然是比原图……

网友NO.110733

jQuery Select下拉框操作小结(推荐)

jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 jQuery获取Select元素,并设置的 Text和Value: 实例分析: 1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中 3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 jQuery添加/删除Select元素的Option项: 实例分析: 1. $("#select_id").append("option value='Value'Text/option"); //为Select追加一个Option(下拉……

网友NO.634017

Jquery插件之打造自定义的select标签

首先看下效果 head title/title link type="text/css" rel="Stylesheet" href="JQSelect.css" / script type="text/javascript" src="jquery-1.2.6.js"/script script type="text/javascript" src="JQSelect.js"/script script type="text/javascript" $(function() { $("#test").jsScroll(); }) /script /head body select id="test" option value="1"1/option option value="2"2/option option value="3"3/option option value="4"4/option option value="5"5/option option value="6"6/option option value="7"7/option option value="8"8/option option value="9"9/option option value="10"10/option /select 比较简陋只是将select转成自定义的样式 现在只有2个参数可以设置 $(function() { $("#test").jsScroll({ showLength: 3, option_click: function() { alert("1"); } }); }) showLength:下拉框默认显示数量 ---默认显示5个 option_click:点击每一个option执行的事件--默认是将options的值绑定到input中 在线演示:http://demo.jb51.net/js/2011/JQSelect/ 打包下载://www.jb51.net/……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

投诉 / 推广 / 赞助:QQ:520161757