[原创]jquery 在 table 中修改某行值_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
2
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3910 | 回复: 1   主题: [原创]jquery 在 table 中修改某行值        上一篇   下一篇 
panpan.nie
注册用户
等级:大校
经验:4754
发帖:217
精华:2
注册:1970-1-1
状态:离线
发送短消息息给panpan.nie 加好友    发送短消息息给panpan.nie 发消息
发表于: IP:您无权察看 2016-5-31 17:01:13 | [全部帖] [楼主帖] 楼主

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

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

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

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

$(function(){      
      $('tr.modifyType').dblclick(function(){      
      var oldid = $(this).find(".id").val().replace(/[\r\n\s]/g,"");    
              var oldkeyCode= $(this).find(".keyCode").html().replace(/[\r\n\s]/g,""); 
              var oldkeyName= $(this).find(".keyName").html().replace(/[\r\n\s]/g,""); 
              var oldkeyType= $(this).find(".keyType").html().replace(/[\r\n\s]/g,"");         
              var olddefaultValue= $(this).find(".defaultValue").html().replace(/[\r\n\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>





赞(0)    操作        顶端 
blackTrc
注册用户
等级:少校
经验:853
发帖:13
精华:0
注册:2015-4-28
状态:离线
发送短消息息给blackTrc 加好友    发送短消息息给blackTrc 发消息
发表于: IP:您无权察看 2017-3-16 17:57:53 | [全部帖] [楼主帖] 2  楼

好详细的代码,赞一个


66.jpg



赞(0)    操作        顶端 
总帖数
2
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论