Question

在这里，我只能在一个元素上看到框，我选择用于编辑的元素。当我点击编辑时，我想在所有元素上看到框。我怎么处理这个？

这是我的代码......

<!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
        });         
       });
   });

Answer 1

您的$（this）将保留您点击的唯一元素所以，

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

此代码只会将文本框添加到该元素中。

您需要首先获取clicked元素的父级，如

var p = $(this).parentNode;

然后将所有子节点用于'p'元素。
并对所有子元素使用for循环，并为每个元素添加上面的代码，而不是$(this)。

我想通过点击编辑选择整行进行编辑

1 个答案: