您的位置：首页 > Web前端 > JQuery

JS+jQuery+Easyui实现动态添加控件及赋值

2015-09-05 21:14 946 查看

背景：某天阳光明媚的午后，和小伙伴们完一个游戏，在一个黑箱中放了红橙黄绿青蓝紫七种颜色的球，我让几名玩游戏的小伙伴分别从黑箱里抓球，并且统计他们都抓了哪种颜色的球。。最后的结果是，有抓的多，有抓的少，抓到的颜色也不一样。

那么问题来了！！

如果让你做一个统计软件怎么记录小伙伴的都抓了几个球并且什么颜色的球？

以下是asp代码：

<span style="font-size:12px;"><span style="font-size:14px;"><!DOCTYPE html>
   
<head>
    <title>Index</title>
    <script src="../../Scripts/MyScript/Checkpeople.js"></script>
    <link href="../../CSS/test.css" rel="stylesheet" />
    <script src="../../Scripts/StartExam/StartExam.js"></script>
    
    <script src="../../Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>    
    <script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/icon.css">

<div id="mainbody">
    <div id="bodytitle">玲博拿到的球</div>
       
    <table id="tab1" align="center" style="padding-top:100px" border="0" cellPadding="1" cellSpacing="0" borderColorLight="#999999" borderColorDark="#ffffff" style="width:50%;word-break: break-all">
        
       <tr >
	 <td >
             <input type="hidden" name="fuJ" id="fuJ1" />
         </td> 
         <td id="Exam0" class="firstline" align="right">颜色</td>
         <td><input id="MainTeacher" class="easyui-combobox" data-options="" align="center"/></td>
         <td><a type="button"class="easyui-linkbutton" name="Submit" value="增加一行" data-options="iconCls:'icon-add'" onclick="javascript: AddRow();" />
	     <a type="button"class="easyui-linkbutton" name="Submit" value="删除一行" data-options="iconCls:'icon-remove'" onclick="javascript: DelRow();" />
        </tr>

        <tr>         
          <td><input type="checkbox" id="box1" onClick="GetRow()"/></td> 
              <input type="hidden" name="fuJ"/>      
          <td id="Exam0" class="firstline" align="right">颜色</td>
          <td><input id="cc1" name="dept" value=""> </td>
         </tr>
         <script type="text/javascript">
             $('#cc1').combobox({
                 valueField: 'ID',
                 textField: 'ColorBall',
                 url: '/PlayGame/ColorBall'
                 });
         </script>
     </table>

Js代码-在上面代码中引用

<span style="font-size:12px;"><span style="font-size:14px;">////添加一行
	$(document).ready(function () {
	    //删除按钮加载减号
	    $('#btn_Add2').combobox({
	       cache: false,
	       iconCls: 'icon-remove'
	       })
	     //添加按钮加载加号
	     $('#btn_Add1').combobox({
	        cache: false,
	        iconCls: 'icon-add'
	        })
	
	     //第一行颜色，赋值
	     $('#MainTeacher').combobox({
	        valueField: 'year',
	        textField: 'year',
	        url: '/AddExam/GetGrade'
	        })
	    
	function AddRow() {
	     //添加一行
	     var i = tab1.rows.length;//页面上存在行数
	     var Nam = "'div1'";
	     var Cod = "fuJ" + i;
	     var newTr = tab1.insertRow();
	     //添加列
	     var newTd0 = newTr.insertCell();
	     var newTd1 = newTr.insertCell();
	     var newTd2 = newTr.insertCell();
	     var newTd3 = newTr.insertCell();
	     //设置列内容和属性
	     newTd0.innerHTML = '<input type="checkbox" id="box1" onClick="GetRow()"/ /><input type="hidden" name="fuJ" id=' + Cod + ' />';
	     newTd1.innerHTML = '<td id="Exam0" class="firstline" align="right">颜色</td>';
	     newTd2.innerHTML = '<td><input id="cc" name="test" class="easyui-combobox"/></td>';
	     $("#cc").combobox({
	        valueField: 'year',
	        textField: 'year',
	        url: '/AddExam/GetGrade'
	      })  
	    }
	    
	    
	
	function DelRow()
	{
	    //删除一行
	    var shu=0;
	    var cheCou=document.all("box1");//页面上所有的复选框
	    for(var i=1;i<cheCou.length;i++)//
	    {
	        if (cheCou[i].checked==true)
	        {
	            shu++;
	        }
	    }
	    if(shu==cheCou.length)
	    {
	        alert('最少要添加一个数据');
	        return;
	    }
	    else  if(shu==0)
	    {
	        alert('请选择你要删除的信息');
	        return;
	    }
	    else if(shu==2)//
	    {
	        for(var i=1;i<cheCou.length;i++)//
	        {
	            if(cheCou[i].checked==true)
	            {
	                tab1.deleteRow(i+1);
	            }
	        }
	    }
	    else if(shu>1)
	    {
	        for(var a=0;a<shu;a++)
	        {
	            for(var i=0;i<cheCou.length;i++)
	            {
	                if(cheCou[i].checked==true)
	                {
	                    tab1.deleteRow(i+1);
	                    break;
	                }
	            }
	        }
	    }
	}
	function GetRow()
	{
	    //获得行索引
	    //两个parentElement分别是TD和TR哟，rowIndex是TR的属性
	    cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
	}

经过了修改和测试，得到上面的代码就可以实现动态的添加页面中的控件，但是它并不是最完美的代码，还有很多问题需要解决：例如考虑到给用户带来方便，默认给用户加载出默认值，这样就可以让用户尽可能的少操作软件，体验软件带来的方便；添加一个控件之后后面的控件是没有办法获取值，这里就要用到循环加载控件及赋值；对于页面中添加多余的软件进行动态的删除。最后将页面数据保存到数据库中。

上面的代码只是千千万万中方法中的一种，还有很多其他更为灵活和方便的方法需要去试验和比对。博主继续测试，然后在分享给大家。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航