代码重构七

2014年3月5日 08:50:30

工作上需要动态添加表格的记录,然后删除部分。

js如下:

/*
 * 
 *---------
 *2014-03-04 16:40:38
 *新增tr
 *----------
 */

 function insRow(){
     
     var ta =document.getElementById("productTable");
     var i=ta.rows.length;
     //
     var newRow = ta.insertRow(i);    

     //设置行的属性
     //ie不支持此设置
    // newRow.setAttribute('onclick','changeColor()');
     newRow.onclick = changeColor;
     //单元格
     var newTd0= newRow.insertCell(0);
      var newTd1= newRow.insertCell(1);
       var newTd2= newRow.insertCell(2); 
        var newTd3= newRow.insertCell(3);
        
         var newTd4= newRow.insertCell(4);
      var newTd5= newRow.insertCell(5);
       var newTd6= newRow.insertCell(6); 
        //单元格的内容
         
       newTd0.innerHTML=i;
       newTd1.innerHTML="<input type='text' value='' name='sp_ProductNo[]'  />";
       newTd2.innerHTML="";
       newTd3.innerHTML="";
        newTd4.innerHTML="";
         newTd5.innerHTML="<input type='text' value=''  name='sp_Amount[]' />";
          newTd6.innerHTML="<input type='text' value=''  name='sp_Remark[]' />";
           
     }
插入行
/*
  *---------
  *2014-03-04 17:27:41
  *点击改变tr的颜色
  *--------------
  */

  function changeColor(){

    $(this). toggleClass("highLight"); 
    
      }
选中tr
/*
 * -----------
 *2014-03-05 08:39:07
 *删除tr
 *对原来的要重新排序,否则行号乱了
 *-------------------
 *
 */
 function deleRow(){
     $("tr[class='highLight']").each(function(){
         $(this).remove();
         });
     }
删除tr

 

/*
 *----------- 
 *2014-03-05 08:49:47
 *对表格行号排序
 *------------------
 *
 */
 function sortRow(){
             var i=1;
     $("#productTable  tr td:first-child").each(function(){
            $(this).html(i);
            i++;

         });
     }
排序

 

 

2014年3月5日 10:45:22

 

 

页面post过来的数组,无法直接[]访问

 

 $this->input->post('sp_ProductNo') 是数组,直接在后面添加[0] 报错。

解决的方法是: 先存为变量,再访问就正常

 

2014年3月5日 15:19:02

 

今天遇到一个问题,表格的tr上无法执行onclick事件

<tr onClick="changeColor()">
tr不执行

见鬼啊。。。暂时没看出错在哪,等待后期解决吧

 

2014年3月5日 15:33:25  发现了错误的根源。 js的changeColor方法,没有传递事件的元素,

之前该方法是 用js添加到tr上,无需传递 元素。

解决方法: 另写一个方法,下班后研究 如何整合到一起。

/*
  *---------
  *2014-03-04 17:27:41
  *点击改变tr的颜色
  *2014-03-05 15:30:04
  *需要修改,js添加下面的函数,不需要传递元素。可以通过 this 获取
  * 但是不是该函数直接添加到tr属性上,则需要参数 。
  *解决办法:重写一个方法
  *--------------
  */

  function changeColor(){

     
    $(this). toggleClass("highLight"); 
    
      }
  function changeTrColor(element){
      $(element). toggleClass("highLight"); 
      }
  
重写方法

 

 

 

 

posted on 2014-03-05 08:56  jsRunner  阅读(144)  评论(0编辑  收藏  举报

导航