php - 我想通过单击编辑来选择整行进行编辑

标签 php javascript jquery mysql

在这里,我只能看到一个元素上的框,即我选择用于编辑的元素。我想在单击编辑时看到所有元素上的框。我该如何处理这个问题?

这是我的代码...

<!DOCTYPE html>
<html>
       <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script>
            function mDown(obj) {
                obj.innerHTML="update"
            }

            function mUp(obj) {
                obj.innerHTML="update"
            }

            jQuery(document).ready(function(){
                jQuery("form").submit(function(){
                //alert("Submitted");
                jQuery("#myform").submit();
                });  
            $('.edit').click(function(){  
        //alert("Submitted");
            $('.ajax').html($('.ajax input').val());  
            $('.ajax').removeClass('ajax');  

            $(this).addClass('ajax');  
            $(this).html('<input id="editbox" size="'+  
            $(this).text().length+'" value="' +  
            $(this).text() + '" type="text">');  

            $('#editbox').focus();                                                  
        });  
        $('.edit').keydown(function(event){ 
                     // alert("Submitted");
         arr = $(this).attr('class').split( " " );  
         if(event.which == 13) {   
             $.ajax({    
                             type: "POST",  
             url:"config.php",  
             data: "value="+$('.ajax input').val()+"&rownum="+arr[2]+"&field="+arr[1],  
             success: function(data){  
                 $('.ajax').html($('.ajax input').val());  
                 $('.ajax').removeClass('ajax');                                                     
              }});  
          }                                             
          });  
          $('#editbox').live('blur',function(){

          $('.ajax').html($('.ajax input').val());  
          $('.ajax').removeClass('ajax');  
    }); 

    $('td.delete1').on('click',function() {
        //alert("Submitted");
        var parent = $(this).closest('tr');
        $.ajax({            
        type: 'get',
        url: 'dl.php', // <- replace this with your url here
        data: 'ajax=1&delete=' + $(this).attr('id'),
        beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},300);
        },
        success: function() {
            parent.fadeOut(300,function() {
                parent.remove();
            });
        }
        });   
        $('.delete').confirm({
         msg:'Do you really want to delete this?',
         timeout:3000
        });         
       });
   });

最佳答案

您的 $(this) 将保存您单击的唯一元素。
所以,

$(this).addClass('ajax');  
$(this).html('<input id="editbox" size="'+  
$(this).text().length+'" value="' +  
$(this).text() + '" type="text">');

此代码将仅向该元素添加文本框。

您需要首先获取单击元素的父级,例如

var p = $(this).parentNode; 

然后获取“p”元素的所有子节点。
并对所有子元素使用 for 循环,并为每个单个元素添加上述代码,而不是为 $(this)

关于php - 我想通过单击编辑来选择整行进行编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18671321/

相关文章:

javascript - 在 PHP 中将变量从一个页面发送到另一个页面

php - 在 Woocommerce 的某些页面上添加产品 ID 的星级评级

javascript - 正则表达式来验证用户 ID

javascript - Flex table - 如何同步单元格高度

javascript - Firebase Admin SDK 下载/检索谷歌云存储上的文件

javascript - 使用jquery获取动态图像的客户端图像宽度

JavaScript 不适用于 php echo

javascript - 单击链接后如何显示警告框

javascript - Jquery延迟执行脚本

jquery - 为什么我的 jquery ajax 发布到 django View 总是导致错误回调执行