web页面开发中常用的js代码

1.获取多个checkbox的选中的id,可以为单个或者多个

**
* 取得checkbox中选中的id，单个或多个
*/
function getSelectedRowIds(){

	var count=0;
	    
	    var selectedRow = document.getElementsByName("selectedRow");
	    var ids = new Array();
	    for (i=0;i

2.实现多个选项卡切换的功能

//实现div显示与隐藏的效果
function showDetails(name, cursel, n) {
	for (i = 1; i <= n; i++) {
		if(cursel==i){
			//变淡绿
			$("#"+name + cursel+"").css("background-color", "#00DD77");
			$("#con_" + name + "_" + cursel+"").show();
		}else{
			//变深绿
			$("#"+name + i+"").css("background-color", "#5cb85c");
			$("#con_" + name + "_" + i+"").hide();
		}
	}
}
  选项卡一
 选项卡二
 选项卡三
         
  
内容1
  
内容2
  
内容3

3.实现点击单个checkbox选中影响另外一个输入框是否可以编辑

$("#warn_notice_enable").click(function(){
    if($(this).is(":checked")){
        $("#smsnotice_enable").attr("disabled",false);
    }else{
        $("#smsnotice_enable").attr("disabled",true);
    }
})
//若输入框为easyui则设置属性为
$('#vm_empt_config').numberbox('enable');或者$('#vm_empt_config').numberbox('disable');

4.常见使用js设置样式以及一些属性

//用来设置背景颜色
$('#disk_tea').css("background-color","#FFF");
//设置某一个div隐藏
$('#chkBfrLogin').css('display','none');
//也可以使用jquery隐藏或者显示
$("#conn_1").show();
$("#conn_2").hide();
//移除样式
$("#id").removeClass("intro");
//添加样式
$("#id").addClass("intro");

5.实现遍历多个name属性相同的操作

$("input[name='taskName']").each(function (i){

 });

6.可以实现多个checkbox全选或者全不选

//choseAll为列表头的checkbox

$("#choseAll").change(function(){
        //勾选全选
            if(this.checked){
                $("table tr td input[type=checkbox]").prop("checked",true);
            }else{
                $("table tr td input[type=checkbox]").prop("checked",false);
            }
        });

7.在列表页面中若只能操作单个数据则可以使用引用下面函数

/**
* 取得checkbox中选中的id，单个
*/
function getSelectedRowId(){


var count=0;
   var id = "";
   var selectedRow = document.getElementsByName("selectedRow");
   for (i=0;i

8.实现跳转到一个页面或者一个后台方法,url为跳转的页面地址

function addJobUnit(){
var url="";
var iWidth=600;  //弹出窗口的宽度;
var iHeight=200; //弹出窗口的高度;
var iTop = (window.screen.availHeight-20-iHeight)/2; //获得窗口的垂直位置;
var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;
window.open(url,null,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no'); 
}

9.实现table上某一行显示的数据可以进入编辑状态

  

    
1
    
2
    
3
    
3
  
  

    

    

    

    

    修改
    删除
    
  
  

/编辑表格
function editTable(node){
    var str = $(node).text().trim()=="修改"?"确定":"修改";  
    $(node).text(str);   // 按钮被点击后，在“修改”和“确定”之间切换
    $(node).parent().siblings("td").each(function() {  // 获取当前行的其他单元格
       obj_text = $(this).find("input:text");    // 判断单元格下是否有文本框
       if(!obj_text.length)// 如果没有文本框，则添加文本框使之可以编辑
       {
     $(this).html("");
       }else{   // 如果已经存在文本框，则将其显示为文本框修改的值
      $(this).html(obj_text.val()); 
}
    });
}