jquery css 简单笔记

时间：2022-07-05 08:33:20

内容 要点：清空表单中所有数据，除去 button,submit,reset,hidden 的数据

  1. $(':input','#myform')
  2. .not(':button, :submit, :reset, :hidden')
  3. .val('')
  4. .removeAttr('checked')
  5. .removeAttr('selected');

It is using the :input

selector which will match all input, textarea, select and button elements. Since we are passing #myform 
as the second argument, it will only find inputs inside this form 
element. Then it filters out all buttons, submits, resets and hidden 
inputs using not()

. Then it is using val()

to set the value of the remaining fields to an empty string, and then it uses removeAttr

to remove the checked 
and selected 
attribute of the fields in case you have any radio/checkbox/select inputs. Tada.

1、实例  数据来自后台，只写前台处理方法

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="erp" uri="/erp-tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<LINK href="../../../system/doctors/dept/styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../../../skin/style_140605.css" />
<script src="../../../system/doctors/dept/searchbox.js" charset="gbk" ></script>
<script language="javascript" src="../../../system/staff_manage/jilu/LodopFuncs.js"></script>
<script language="javascript" src="../../../jslib/json.js"></script>
<style>
#Tablist2 tr th{
word-break:keep-all;
}
</style>
<html>
<script>
jQuery(function(){
var data=${jobhistoryListjson}; //从后台获取列表数据
var datastr="";
jQuery.each(data, function(i, n){
//alert(JSON.stringify(n));
var index=i+1;
datastr+="<tr><td>"+index+"</td><td>"+n.user_name+"</td><td>"+n.dept_name+"</td><td>"+n.start_datetime+"</td><td>"+n.end_datetime+"</td>"
// +"<td>"+n.job+"</td><td style='width:400px;'>"+n.category+"</td><td>"+n.source+"</td><td>"+n.address+"</td><td>"+n.review+"</td><td>"+n.content+"</td>"
+"<td>"+n.job+"</td><td>"+n.category+"</td><td>"+n.source+"</td><td>"+n.address+"</td>"
+"<td><input data='"+JSON.stringify(n)+"' type='button' class='inputbutton' value='编辑' />"
+"<input data='"+n.jobhistory_id+"' type='button' class='inputbutton' value='删除' /></td></tr>";

});
jQuery("#Tablist2").append(datastr);
jQuery("#Tablist2 input[type='button']").click(function(){

if(jQuery(this).attr("value")=="编辑")
{
if(jQuery(this).attr("data")!=null&&jQuery(this).attr("data")!="")
{
var item = JSON.parse(jQuery(this).attr("data"));

jQuery("#jobhistory_jobhistory_id").val(item.jobhistory_id);
jQuery("#jobhistory_user_name").val(item.user_name);
jQuery("#jobhistory_dept_code").val(item.dept_code);
document.getElementById("jobhistory.start_datetime").value= item.start_datetime;
document.getElementById("jobhistory.end_datetime").value= item.end_datetime;
jQuery("#jobhistory_job").val(item.job);
jQuery("#jobhistory_category").val(item.category);
jQuery("#jobhistory_source").val(item.source);
jQuery("#jobhistory_address").val(item.address);
jQuery("#jobhistory_review").val(item.review);
jQuery("#jobhistory_content").val(item.content);
}
}
else if(jQuery(this).attr("value")=="删除")
{
if(jQuery(this).attr("data")!=null&&jQuery(this).attr("data")!="")
{
var deletes = jQuery(this).attr("data");
deleteDataall(deletes);
}
}
});
});
</script>
<body >
<br/>
<table cellpadding="0" cellspacing="0" id="Tablist2">
<tr>
<th width="30">序号</th>
<th width="150">医生</th>
<th width="150">科室</th>
<th width="150">开始时间</th>
<th width="150">结束时间</th>
<th width="150">担当职务</th>
<th width="400">工作类别</th>
<th width="150">任务来源</th>
<th width="150">地点</th>
<%--
<th width="350">工作评价</th>
<th width="350">工作内容</th>
--%>
<th>操作</th>
</tr>
</table>
<br />
<br />
<form action="" id="form1">
<table cellpadding="0" cellspacing="0" id="Tablist1">
<s:hidden name="jobhistory.jobhistory_id" ></s:hidden>
<s:hidden name="jobhistory.user_name" ></s:hidden>
<s:hidden name="jobhistory.dept_code" ></s:hidden>
<s:hidden name="dept_code"></s:hidden>
<s:hidden name="dengluming"></s:hidden>
<s:hidden name="userId"></s:hidden>
<input type="hidden" id="flagsString" name="flagsString" value="true"/>
<tr>
<td class="t_name">开始时间</td>
<td><input type="text" readonly="readonly" id="jobhistory.start_datetime" name="jobhistory.start_datetime" value="" class="datetimeText1" /></td>
<td class="t_name">结束时间</td>
<td><input type="text" readonly="readonly" id="jobhistory.end_datetime" name="jobhistory.end_datetime" value="" class="datetimeText1"/></td>
</tr>
<tr>
<td class="t_name">担当职务</td>
<td><s:textfield name="jobhistory.job" cssClass="required" ></s:textfield></td>
<td class="t_name">工作类别</td>
<td><s:select list="categoryList" name="jobhistory.category" listKey="dict_child_id" listValue="dict_child_name" headerKey="" headerValue="请选择" /></td>
</tr>
<tr>
<td class="t_name">任务来源</td>
<td><s:select list="sourceList" name="jobhistory.source" listKey="dict_child_id" listValue="dict_child_name" headerKey="" headerValue="请选择" /></td>
<td class="t_name">地点</td>
<td><s:textfield name="jobhistory.address" cssClass="required"></s:textfield></td>
</tr>
<tr>
<td class="t_name">工作评价</td>
<td><s:textarea name="jobhistory.review" style="width:320px"></s:textarea></td>
<td class="t_name">工作内容</td>
<td><s:textarea name="jobhistory.content" style="width:320px" ></s:textarea></td>
</tr>
<tr>
<td colspan="4" id="btn_control">
<input type="button" class="inputbutton" value="清空" title="清空" id="btnrest"/>
<input type="button" class="inputbutton" value="保&nbsp;&nbsp;存" title="保存" onclick="saveNew();"/>
<input type="button" class="inputbutton" value="返&nbsp;&nbsp;回" title="返回" onclick="goToBack();"/>
</td>
</tr>
</table>
</form>

</body>
</html>
<script type="text/javascript">
$(document).ready( function() {
$("#roleTable").tablesorter({
widgets: ['zebra','columnHighlight','rowHover'],
headers:{ 0: { sorter: false}},
cancelSelection:true
});
$("#btnrest").click(function(){
$("#jobhistory_jobhistory_id").val("");

$('input','#form1')
.not(':button,:submit,:reset,:hidden') //将myform表单中input元素type为button、submit、reset、hidden排除
.val('') //将input元素的value设为空值
.removeAttr('checked')
.removeAttr('selected'); // 如果任何radio/checkbox/select inputs有checked or selected 属
alert($('input','#form1'));
$('select','#form1')
.not(':button,:submit,:reset,:hidden') //将myform表单中input元素type为button、submit、reset、hidden排除
.val('') //将input元素的value设为空值
.removeAttr('checked')
.removeAttr('selected'); // 如果任何radio/checkbox/select inputs有checked or selected 属
alert($('select','#form1'));

$('textarea','#form1')
.not(':button,:submit,:reset,:hidden') //将myform表单中input元素type为button、submit、reset、hidden排除
.text("")
.removeAttr('checked')
.removeAttr('selected'); // 如果任何radio/checkbox/select inputs有checked or selected 属
alert($('textarea ','#form1'));
});
});

//删除组
function deleteDataall(deletes){
if(null!=deletes&&""!=deletes){
var deletes = deletes +'&dept_code=${dept_code}&dengluming=${dengluming}&userId=${userId}&flagsString=true';
deleteModify('removeJob.action','personIds='+deletes);//mian.js
}
}
//保存返回修改
function saveNew(){
var type=document.getElementById("jobhistory_jobhistory_id").value;
var src="saveJobForAll.action";
if(null!=type && ""!=type){
src="updateJobForAll.action";
}
document.getElementById("form1").action=src;
document.getElementById("form1").submit();
}

</script>

jquery css 简单笔记的更多相关文章

  1. jQuery&plus;CSS 简单代码实现遮罩层&lpar; 兼容主流浏览器 &rpar;

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  2. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  3. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  4. js&comma;jquery&comma;css&comma;html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  5. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  6. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  7. jQuery源码笔记&lpar;二&rpar;：定义了一些变量和函数 jQuery &equals; function&lpar;&rpar;&lbrace;&rcub;

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  8. 推荐20款基于 jQuery &amp&semi; CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  9. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

随机推荐

  1. 最简单jquery轮播图效果

    样式部分 <style type="text/css"> *{;;} ul,ol{list-style:none;} #box{width:420px;height:6 ...

  2. android学习笔记36——使用原始XML文件

    XML文件 android中使用XML文件,需要开发者手动创建res/xml文件夹. 实例如下: book.xml==> <?xml version="1.0" enc ...

  3. sql脚本的格式

    创建表前先判断是否存在 IF OBJECT_ID(N'TableDataDictionary') IS NULL 存储过程头:--=================================== ...

  4. netcat运行出错

    今天项目上利用运行netca创建监听时报错,(运行netmgr可以弹出窗口,未测试是否可以建立监听) 报错信息: [oracle@BSS-WG2 ~]$netca Oracle Net Service ...

  5. 10个加速Table Views开发的Tips&lpar;转&rpar;

    本文由CocoaChina译者yake_099(博客)翻译,作者:David McGraw原文:10 Actionable Performance Tips To Speed Up Your Tabl ...

  6. InputStream和Reader，FileInputStream和 FileReader的区别

    一.InputStream和Reader的区别 InputStream和Reader都可以用来读数据(从文件中读取数据或从Socket中读取数据),最主要的区别如下: InputStream用来读取二 ...

  7. 为什么要用日志框架 Logback 基本使用

    [日志框架]以时间为单位描述应用项目运行状态:用户下线.接口超时.数据库崩溃等等一系列事件 [日志框架能力] 1.定制输出格式 2.定制输出目标 3.携带 Context 比如 HelloWorld. ...

  8. GIT操纵

    简易的命令行入门教程: Git 全局设置: git config --global user.name "XXX" git config --global user.email & ...

  9. Qt发布可执行程序

    在Qt Creator下用release跑一遍程序,生成相应的EXE文件.   在Qt Creator下编译好的release下的 youProgramName.exe 拷贝到一个文件夹下面:   在 ...

  10. 所以到底什么是 Growth Hacking？

    Growth hacking 在硅谷的确是有快被用坏的趋势,之所以在大陆的互联网创业圈里还没有普及开来,我想一个是由于这个词并没有对应的中文解释,没有一个能够找到一个相对完美的解释,就像 “hack” ...

相关文章