0

在这里，我只能在一个元素上看到框，即我为编辑选择的那个。当我点击编辑时，我想看到所有元素的框。我该如何处理？

这是我的代码...

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

1 回答 1

1

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

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

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

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

var p = $(this).parentNode;

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

于 2013-09-07T08:45:11.967 回答