jquery css 简单笔记

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>

时间: 2024-11-09 06:19:43

jquery css 简单笔记的相关文章

jQuery的简单笔记

html css javaScript Ajax jQuery Java servlet jsp jdbc mysql oracle struts spring hibernate jdpm tomcat jUnit Ant Hadoop linux unix android sql server jQuery的简单笔记//使用JQuery输出    /*     * jquery对象:需要用"$"来修饰     *      * jquery获取页面标签:$()来包裹,通过"

jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

/* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester下IE8-IE10** Author:博客园小dee */ 比起使用注册页和登陆页,网站在当前页使用遮罩层注册和登陆的用户体验要好不少.这里使用jQuery和CSS实现一个简单的遮罩效果. 在页面点击"注册",出现一层有不透明度的黑色遮罩:遮罩层的上方是注册框:此时无法点击页面上除注册框外

jQuery css简单特效

1.将div的滚动条滚动到最底端 <div class="container"></div> var $container=$(".container") $container.scrollTop($container[0].scrollHeight);//滚动到最底端

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

jQuery插件学习笔记

最近在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块增加自己的方法和额外的功能.通过这种机制,Jquery允许我们自己创建属于我们自己的插件,提高我们在开发过程中的效率. 虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名.但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

如何利用jQuery进行简单表单验证

如何利用jQuery进行简单表单验证:利用jQuery可以进行表单验证,当然有比较复杂的表单验证,这里就不介绍了,下面就简单介绍一下如何使用jQuery进行简单的表单验证,然后大家可以通过改造进行基本的表达验证了.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http

【转】CSS选择器笔记

作者: 阮一峰 日期: 2009年3月12日 来源:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查看.这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步. 笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器.今天的笔记中包括44个选择器,基本涵

【源码分享】jquery+css实现侧边导航栏

jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2css代码 这里是css代码,详情请看注释 1 <style>