zoukankan      html  css  js  c++  java
  • jquery 在 table 中修改某行值

    修改 table 中某行的的方法步骤如下:

    1、选择要修改的行,事件触发,比如我的 双击某行时修改

    2、将要修改的行,替换为input,原先的列中的值,需要放到对应的input中作为默认值

    3、修改完成后,事件触发将其还原,比如我的 如果鼠标移走,不在该行上时触发

    $(function(){      
          $('tr.modifyType').dblclick(function(){
          var oldid = $(this).find(".id").val().replace(/[
    s]/g,"");    
                  var oldkeyCode= $(this).find(".keyCode").html().replace(/[
    s]/g,""); 
                  var oldkeyName= $(this).find(".keyName").html().replace(/[
    s]/g,""); 
                  var oldkeyType= $(this).find(".keyType").html().replace(/[
    s]/g,"");         
                  var olddefaultValue= $(this).find(".defaultValue").html().replace(/[
    s]/g,"");  
          var type = '<select  class="keyType"   ><option value="text">text</option><option value="table">table</option>'
          +'<option value="image">image</option></select>';
          var str = '<input id="isDblFlag" type="hidden"><input class="id" type="hidden" value="'+oldid
          +'"><td class="keyCode">'+oldkeyCode
          +'</td><td><input type="text" class="keyName" value="'+oldkeyName
          +'"></td><td>'+type
          +'</td><td ><input type="text"class="defaultValue" value="'+olddefaultValue+'"></td>';
    
              $(this).html(str);          
        }).hover(function(){    
            $(this).addClass('keyhover');    
        },function(){ 
             if($("#isDblFlag").length>0)
              {
                  var thisid = $(this).find(".id").val();    
                  var keyCode= $(this).find(".keyCode").html(); 
                  var keyName= $(this).find(".keyName").val(); 
                  var keyType= $(this).find(".keyType").val();         
                  var defaultValue= $(this).find(".defaultValue").val();    
                 
                   
                  str = '<input class="id" type="hidden" value="'+thisid
                  +'"><td class="keyCode">'+keyCode
                  +'</td><td class="keyName">'+keyName
                  +'</td><td class="keyType">'+keyType
                  +'</td><td class="defaultValue">'+defaultValue+'</td>';
                  $(this).html(str);
              }   
            $(this).removeClass('keyhover');    
        });
      });
    
    

    对应的html页面

    
    

    <style>
    .keyhover
    {
    background-color:green
    }
    </style>


    <
    table class="table"> <tr><th>关键字</th><th>关键字含义</th><th>类型</th><th>默认值</th></tr> <tr class="modifyType"> <input class="id" type="hidden" value="id"> <td class="keyCode">keyCode</td> <td class="keyName">keyName</td> <td class="keyType">keyType</td> <td class="defaultValue">defaultValue</td> </tr> </table>
  • 相关阅读:
    启动eclipse报错 Could not create the Java Virtual Machine
    网站优化-HTML关键词代码使用
    [转载]我们应该更依赖手机一点
    跨域问题
    我研制的操盘机器人今天继续大获全胜2017-03-01
    昨日买的股票今日大获全胜,今日买的毫发无损,操盘机器人年后至今仅一天失误,超强,雄起
    机器人战胜人类操盘手,我研制三年的成果
    年后连续5天开门红,机器人越战越勇
    在家附近散个步(新昌),调整一下情绪,明天就要上班了
    今天开门红,好兆头
  • 原文地址:https://www.cnblogs.com/panie2015/p/5546491.html
Copyright © 2011-2022 走看看