html表格整体左移动,js操作table统制tr jquery 两个table左右移动

js操作table控制tr jquery 两个table左右移动

一.关于动态操作select的问题:

-------------------------------------------------------

//使用json格式传递到前台去

List list = service.loadProvince();

StringBuffer s = new StringBuffer("[");

for(int i = 0 ; i < list.size(); i++){

s.append("\"").append(list.get(i)).append("\"");

if(i

s.append(",");

}

}

s.append("]");

//相当于 ["北京","湖南"]

response.setContentType("text/json;charset=UTF-8");

response.getWriter().println(s.toString());

response.getWriter().close();

前台:

var ret = eval("("+responseText+")");

var s = "请选择";

for(var i = 0; i < ret.length;i++){

s +=""+ret[i]+"";

}

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选项,选择月份后动态创建日期。

javascripttest

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);

}

}

1月

2月

3月

4月

5月

6月

12月

###########################################################

//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

角色名称:${role.name }

可选部门
已选部门

添        加

全部添加

删        除

全部删除

可选人员

    所在部门:

请选择

${temp.name}

已选人员

添        加

全部添加

删        除

全部删除

2.后台处理类

RoleController

@Controller

@RequestMapping("/role")

public class RoleController extends BaseRestSpringController{

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方法调用前执行,可以存放一些共享变量,如枚举值,或是一些初始化操作

*/

@ModelAttribute

public 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 userList = userinfoManager.getUserByDeptIdAndRoleId(deptid, roleid);

List userQuery = new ArrayList();

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 leftDept = departmentManager.getNoSelectedDeptsByRoleId(id);

//该 角色ID 已经选择的 所有部门

List rightDept = departmentManager.getSelectedDeptsByRoleId(id);

//该角色ID已经选择的所有人员

List rightUser = userinfoManager.getSelectedUsersByRoleId(id);

//取得所有部门,用于选择部门下的人员

List 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 deptIdList = new ArrayList();

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 userIdList = new ArrayList();

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 roleDetailList = new ArrayList();

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;

}

页面显示效果:

1418113632.jpg

1 楼

design1985

2011-10-11

能提供一个静态demo吗?你这个代码不全,缺少东西?如果可以请发至邮箱wax12500@163.com,谢谢。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值