js操作table控制tr jquery 两个table左右移动
一.关于动态操作select的问题：
-------------------------------------------------------
//使用json格式传递到前台去
List<String> list = service.loadProvince();
StringBuffer s = new StringBuffer("[");
for(int i = 0 ; i < list.size(); i++){
s.append("\"").append(list.get(i)).append("\"");
if(i<list.size()-1){
s.append(",");
}
}
s.append("]");
//相当于 ["北京","湖南"]
response.setContentType("text/json;charset=UTF-8");
response.getWriter().println(s.toString());
response.getWriter().close();
前台：
<select id="province" onchange="loadCity(this.value);"></select>
var ret = eval("("+responseText+")");
var s = "<option value=''>请选择</option>";
for(var i = 0; i < ret.length;i++){
s +="<option>"+ret[i]+"</option>";
}
document.getElementById("province").innerHTML = s;
前台也可以使用对象方式
var pro = document.getElementById("province");
//先清空
pro.options.length=0;
for(var i = 0; i < ret.length;i++){
var opt = new Option(ret[i]);
pro.options[pro.options.length] = opt;
}
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
var obj=document.getElementById('mySelect');
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;//读取选定值
var val = obj.options[index].text; //读取选定文本
var val = obj.options[index]=new Option("新文本","新值");//设定新文本
obj.options.remove(index);//删除选中的option
obj.options.length=0;//清除所有option
################################################################################
function ad_changed(obj)
{
id = obj.value;
Ajax.call('adv_auto.php?act=get_id&is_ajax=1', 'parent_id='+id, re_ad_changed, "GET", "JSON");
}
function re_ad_changed(result)
{
child = document.getElementById('ad_id');
child.options.length=0;
for(i = 0; i < result.content.length; i++)
{
child.options.add(new Option());
child.options[i].value = result.content[i].ad_id;
child.options[i].text = result.content[i].ad_name;
}
child.style.display = "";
return ;
}
############################################################################
var text = "test";
var params_select = document.getElementById("params_select");
//创建标签
var opt = document.createElement("option");
//创建文本
var _text = document.createTextNode(text);
//把文本赋给标签
opt.appendChild(_text);
//属性赋值
opt.setAttribute("value",objs[m].keyid);
opt.setAttribute("selected","selected");
//添加
params_select.appendChild(opt);
###########################################################################
javascript动态创建Option选项，选择月份后动态创建日期。
<html>
<head>
<title>javascripttest</title>
<script type="text/javascript">
function setDay()
{
var themonth=document.getElementById("month");
var themaxmonthday=31;
if(themonth.value=="2")
{
themaxmonthday=28;
}
var theday=document.getElementById("day");
var tempdaylength=theday.options.length;
for(var j=tempdaylength;j>0;j--)
{
theday.options.remove(j);
}
for(var i=1;i<=themaxmonthday;i++)
{
var theOption=document.createElement("option");
theOption.innerHTML=i+"日";
theOption.value=i;
theday.appendChild(theOption);
}
}
</script>
</head>
<body>
<select id="month" onchange="setDay()">
<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="12">12月</option>
</select>
<select id="day">
</select>
</body>
</html>
###########################################################
//1.动态创建select
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
//2.添加选项option
function addOption(){
//根据id查找对象，
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}
//3.删除所有选项option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
//4.删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
//5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;
//6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;
//7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
//8.删除select
function removeSelect(){
var mySelect = document.getElementById
}
2.Jquery前台转一个数组到后台,后台取数问题及通过json传集合到前台问题
#################################################################
下面是页面代码：
1. ztfw.jsp
<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/commons/taglibs.jsp" %><style><!--#zdfwPage{width:640px;margin:0px auto;padding:0px 20px 0px;border-width: thin;border-style:solid;border-left-color:#99BBE8;border-right-color:#99BBE8;border-bottom-style:none;border-top-style:none;background:#E9F0F2;line-height:30px;overflow: hidden;}.tabsPage .tabsPageContent{overflow:auto;} --></style><script type="text/javascript"><!--//处理左右表相互移动function moveDepartment(flag){//当点击 添加部门 或者 人员时if(flag=='addDept' || flag=='addUser'){//左边selectvar left="";//右边selectvar right="";if(flag=='addDept'){left = $("#leftDept")[0];right = $("#rightDept")[0];}else{left = $("#leftUser")[0];right = $("#rightUser")[0];}//取得当前选中的select的位置var index = left.selectedIndex;if(index < 0){alert("您没有选择任何部门！");}var id = left.options[index].value;var name = left.options[index].text;//给右边的select添加一个optionright.options.add(new Option(name,id)); //删除选中的左边的optionleft.options.remove(index); }//当点击 添加全部部门 或 全部人员 时if(flag=='addAllDept' || flag=='addAllUser'){//左边selectvar left="";//右边selectvar right="";//当是添加全部部门时if(flag=='addAllDept'){left = $("#leftDept")[0];right = $("#rightDept")[0];}//当 添加全部人员时else{left = $("#leftUser")[0];right = $("#rightUser")[0];}var leftLength = left.options.length;var id;var name;//循环遍历左边的select，添加到右边，删除左边所有for(var i = 0 ; i < leftLength; i++){id = left.options[0].value;name = left.options[0].text;//给右边的select添加一个optionright.options.add(new Option(name,id)); //删除选中的左边的optionleft.options.remove(index); }}//当点击 删除部门 或 删除人员 时if(flag=='deleteDept' || flag=='deleteUser'){var right;var left;if(flag=='deleteDept'){right = $("#rightDept")[0];left = $("#leftDept")[0];}else{right = $("#rightUser")[0];left = $("#leftUser")[0];}var index = right.selectedIndex;if(index < 0){alert("您没有选择任何部门！");}var id = right.options[index].value;var name = right.options[index].text;left.options.add(new Option(name,id)); right.options.remove(index); }//当点击 删除全部部门时if(flag=='deleteAllDept' || flag=='deleteAllUser'){var right;var left;if(flag=='deleteAllDept'){right = $("#rightDept")[0];left = $("#leftDept")[0];}else{right = $("#rightUser")[0];left = $("#leftUser")[0];}var rightLength = right.options.length;var id;var name;for(var i = 0 ; i < rightLength; i++){id = right.options[0].value;name = right.options[0].text;left.options.add(new Option(name,id)); right.options.remove(index); }}}//当选择了部门时，去后台查询出该部门下的人员function getAllUserByDeptId(selectDept){var deptid = selectDept.value;var leftUser = $("#leftUser")[0];leftUser.options.length=0; if(deptid){var parameters = new Object();parameters["deptid"]=deptid;parameters["roleid"]=$("#zdfwRoleId").val();$.post("${ctx}/role/getUserByDeptIdAndRoleId.json",parameters,function(data){for(var i=0;i<data.length;i++){var id = data[i].id;var realName = data[i].realname;leftUser.options.add(new Option(realName,id)); }},"json");}}function saveZdfw(){var parameters = new Object();var rightDept = $("#rightDept")[0];var rightDeptLength = rightDept.options.length;//取得右边的所有 已选部门的IDfor(var i = 0 ; i < rightDeptLength; i++){parameters["deptId"+(i+1)] = rightDept.options[i].value;}var rightUser = $("#rightUser")[0];var rightUserLength = rightUser.options.length;//取得右边的所有 已选人员的IDfor(var i = 0 ; i < rightUserLength; i++){parameters["userId"+(i+1)] = rightUser.options[i].value;}parameters["roleId"] = $("#zdfwRoleId").val();$.post("${ctx}/role/saveZdfw.json",parameters,function(data) {if(data["message"]=="success"){alert("保存成功");}}, "json");}//--></script><div id="zdfwPage"><input id="zdfwRoleId" name="zdfwRoleId" type="hidden" value="${role.id }"><table border="0" align="center" id="zdfwTable" style="text-align: center;width: 640px;height: 100%;"><tr><td colspan="3" style="text-align: center;line-height: 30px;background: #99BBE8;"><b>角色名称：</b>${role.name }</td></tr><tr><td width="280px" height="30px" style="background: #CCE8CF;"><div style="text-align: center;"><b>可选部门</b></div></td><td width="80px"></td><td width="280px" height="30px" style="background: #CCE8CF;"><div style="text-align: center;"><b>已选部门</b></div></td></tr><tr><td width="280px" height="200px"><select id="leftDept" style="width:280px;overflow:auto;height: 100%" size="13"> <c:forEach items="${leftDept}" var="depart"><option value="${depart.id}"><c:out value="${depart.name }"/></option></c:forEach></select></td><td width="80px"><div align="center"><span style="cursor: pointer;" onclick="moveDepartment('addDept');"><font color="red">添 加</font><br><br></span><span style="cursor: pointer;" onclick="moveDepartment('addAllDept');"><font color="red">全部添加</font><br><br></span><span style="cursor: pointer;" onclick="moveDepartment('deleteDept');"><font color="red">删 除</font><br><br></span><span style="cursor: pointer;" onclick="moveDepartment('deleteAllDept');"><font color="red">全部删除</font><br></span></div></td><td width="280px"><select id="rightDept" style="width:280px;overflow:auto;height: 100%" size="13"> <c:forEach items="${rightDept}" var="depart"><option value="${depart.id}"><c:out value="${depart.name }"/></option></c:forEach></select></td></tr><tr><td width="280px" height="30px" style="background: #CCE8CF;"><div style="text-align: center;"><b>可选人员</b><span> 所在部门：<select id="deptid" name="deptid" onchange="getAllUserByDeptId(this);"><option value="">请选择</option><c:forEach items="${allDept}" var="temp"><option value="${temp.id}">${temp.name}</option></c:forEach></select></span></div></td><td width="80px"></td><td width="280px" height="30px" style="background: #CCE8CF;"><div style="text-align: center;"><b>已选人员</b></div></td></tr><tr><td width="280px" height="200px"><select id="leftUser" style="width:280px;overflow:auto;height: 100%" size="13"> <c:forEach items="${leftUser}" var="user"><option value="${user.id}"><c:out value="${user.realname }"/></option></c:forEach></select></td><td width="80px"><div align="center"><span style="cursor: pointer;" onclick="moveDepartment('addUser');"><font color="red">添 加</font><br><br></span><span style="cursor: pointer;" onclick="moveDepartment('addAllUser');"><font color="red">全部添加</font><br><br></span><span style="cursor: pointer;" onclick="moveDepartment('deleteUser');"><font color="red">删 除</font><br><br></span><span style="cursor: pointer;" onclick="moveDepartment('deleteAllUser');"><font color="red">全部删除</font><br></span></div></td><td width="280px"><select id="rightUser" style="width:280px;overflow:auto;height: 100%" size="13"> <c:forEach items="${rightUser}" var="user"><option value="${user.id}"><c:out value="${user.realname }"/></option></c:forEach></select></td></tr><tr><tdcolspan="3" height="80px"><div align="center"><input type="button" onclick="saveZdfw();" style="line-height: 18px;" value="保存"> <input type="button" style="line-height: 18px;" value="取消"></div></td></tr></table></div>2.后台处理类
RoleController
@Controller@RequestMapping("/role")public class RoleController extends BaseRestSpringController<Role,java.lang.String>{ private RoleManager roleManager;private DepartmentManager departmentManager;private UserinfoManager userinfoManager;private MenuManager menuManager;private final String LIST_ACTION = "redirect:/role";/** * 增加setXXXX()方法,spring就可以通过autowire自动设置对象属性,注意大小写 **/public void setRoleManager(RoleManager manager) {this.roleManager = manager;}public void setMenuManager(MenuManager menuManager) {this.menuManager = menuManager;}public void setUserinfoManager(UserinfoManager userinfoManager) {this.userinfoManager = userinfoManager;}public void setDepartmentManager(DepartmentManager departmentManager) {this.departmentManager = departmentManager;}/** binder用于bean属性的设置 */@InitBinder public void initBinder(WebDataBinder binder) { binder.registerCustomEditor(Date.class, new CustomDateEditor(new SimpleDateFormat("yyyy-MM-dd"), true)); } /** * 增加了@ModelAttribute的方法可以在本controller方法调用前执行,可以存放一些共享变量,如枚举值,或是一些初始化操作 */@ModelAttributepublic void init(ModelMap model) {model.put("now", new java.sql.Timestamp(System.currentTimeMillis()));/** * 读入静态字典 */StaticDict.fillMapAll(model);}//根据部门ID，角色ID 取得该部门下面的所有没有选择该角色的人员(启用状态的)@RequestMapping(value="/getUserByDeptIdAndRoleId")public String getUserByDeptIdAndRoleId(HttpServletRequest request,HttpServletResponse response) throws Exception {String deptid = request.getParameter("deptid");String roleid = request.getParameter("roleid");List<Userinfo> userList = userinfoManager.getUserByDeptIdAndRoleId(deptid, roleid);List<UserinfoQuery> userQuery = new ArrayList<UserinfoQuery>();for(Userinfo user:userList){UserinfoQuery query = new UserinfoQuery();query.setId(user.getId());query.setRealname(user.getRealname());userQuery.add(query);}JSONArray jsonArray = new JSONArray();jsonArray.addAll(userQuery);response.setContentType("text/html");response.setCharacterEncoding("utf-8");PrintWriter out = response.getWriter();out.write(jsonArray.toString());out.flush();out.close();return null;}/**角色与部门及人员关系维护 进入指定范围页面 */@RequestMapping(value="/{id}/zdfw")public String zdfw(ModelMap model,@PathVariable java.lang.String id) throws Exception {Role role = (Role)roleManager.getById(id);//该角色ID 没有选择的 所有启用状态的部门List<Department> leftDept = departmentManager.getNoSelectedDeptsByRoleId(id);//该 角色ID 已经选择的 所有部门List<Department> rightDept = departmentManager.getSelectedDeptsByRoleId(id);//该角色ID已经选择的所有人员List<Userinfo> rightUser = userinfoManager.getSelectedUsersByRoleId(id);//取得所有部门，用于选择部门下的人员List<Department> allDept = departmentManager.getAllDepts();model.addAttribute("leftDept",leftDept);model.addAttribute("allDept",allDept);model.addAttribute("rightDept",rightDept);model.addAttribute("rightUser",rightUser);model.addAttribute("role",role);initAddAndUpdate(model);return "/role/zdfw";}/** 保存指定范围结果 */@RequestMapping(value="/saveZdfw")public String saveZdfw(HttpServletRequest request,HttpServletResponse response) throws Exception {List<String> deptIdList = new ArrayList<String>();int deptIndex = 1;String deptid = ServletRequestUtils.getStringParameter(request, "deptId"+deptIndex);while(deptid != null){if(!deptIdList.contains(deptid)){deptIdList.add(deptid);}deptIndex++;deptid = ServletRequestUtils.getStringParameter(request, "deptId"+deptIndex);}List<String> userIdList = new ArrayList<String>();int userIndex = 1;String userid = ServletRequestUtils.getStringParameter(request, "userId"+userIndex);while(userid != null){if(!userIdList.contains(userid)){userIdList.add(userid);}userIndex++;userid = ServletRequestUtils.getStringParameter(request, "userId"+userIndex);}String roleid = request.getParameter("roleId");List<Roledetail> roleDetailList = new ArrayList<Roledetail>();for(String dept:deptIdList){Roledetail detail = new Roledetail();detail.setDeptid(dept);detail.setRoleid(roleid);roleDetailList.add(detail);}for(String user:userIdList){Roledetail detail = new Roledetail();detail.setUserid(user);detail.setRoleid(roleid);roleDetailList.add(detail);}roleManager.updateForZdfw(roleid, roleDetailList);JSONObject json = new JSONObject();response.setContentType("text/html");response.setCharacterEncoding("utf-8");PrintWriter out = response.getWriter();json.put("message", "success");out.write(json.toString());out.flush();out.close();return null;}｝页面显示效果：
1 楼 design1985 2011-10-11 能提供一个静态demo吗？你这个代码不全，缺少东西？如果可以请发至邮箱wax12500@163.com，谢谢。