검사 된 행을 입력 필드로 변환합니다.

Question

데이터베이스의 데이터를 모든 행 앞에있는 확인란과 함께 테이블에 표시하고 있습니다. 내가 원하는 건 편집 버튼을 클릭하면 클래스를 클릭하여 입력란으로 체크 된 행 열을 변경하는 것입니다. 나는 jQuery를 처음 사용했다. 나는 그것에 대해 많은 개념을 가지고 있지 않다. 그래서 제발 도와주세요. 여기

내가 시도한 jQuery 코드입니다 :

$(function() { 
    $("input[name='check[]']:checked").each(function(){     
     $('#edit').click(function(){  
      var OriginalContent = $('.click').text(); 
      $('.click').addClass("cellEditing"); 
      $('.click').html("<input type='text' value='" + OriginalContent + "' />"); 
      $('.click').children().first().focus(); 

      $('.click').children().first().keypress(function (e) { 
       if (e.which == 13) { 
        var newContent = $('.click').val(); 
        $('.click').parent().text(newContent); 
        $('.click').parent().removeClass("cellEditing"); 
        } 

      }); 

      $('.click').children().first().blur(function(){ 
      $('.click').parent().text(OriginalContent); 
      $('.click').parent().removeClass("cellEditing"); 
      }); 
    }); 
}); 

}); 

그리고 여기에 HTML입니다 : 당신이 PHP와 HTML을 작성하고 이후 난 정말 당신의 코드를 사용 didnt한다

echo '<div class="table-responsive">'; 
echo '<table class="table table-bordered table-hover"><thead><tr> 
<th>ID</th><th>Name</th><th>Category</th><th>Description</th><th>Price</th><th>Status</th><th colspan="2">Image</th></tr></thead><tbody>'; 

while($row = mysqli_fetch_array($retval)) 
{ 
echo '<tr><td>'.$row["ID"].'</td> 
<td >'.$row["Name"].'</td> 
<td>'.$row["Category"].'</td> 
<td>'.$row["Description"].'</td> 
<td class="click1">'.$row["Price"].'</td> 
<td class="click">'.$row["Status"].'</td> 
<td><img style="width: 3em; heigth: 3em;" class="img-responsive" src="'.$row["Imagepath"].'" alt="'.$row["Name"].'"/></td> 
<td><input class="checkbox" name="check[]" id="check[]" type="checkbox" value='.$row["ID"].'/></td></tr>'; 

} 
echo '</tbody></table>'; 
echo '</div>'; 

?> 
<center><input class="btn btn-default" name="deletebutton" type="submit" value="DELETE" /> 
<input class="btn btn-default" name="edit" id="edit" type="button" value="EDIT" /> 
<input class="btn btn-default" name="updatebutton" type="submit" value="UPDATE"/></center> 
</form> 

Answer 1

은 기본적으로 당신이 실행하는 두 가지 기능 ...

1. "편집"을 클릭해야합니다 당신의 "편집"입력 중 하나를 편집하는 동안 누르면 입력 : 문자열

로 되돌아 나는 당신의 HTML에게 명확성을 위해 조금 단순화. 필요한 jQuery에 대한 설명은 인라인입니다. 또한

, 여기에 작동 jsFiddle : http://jsfiddle.net/msz76tgp/2/

HTML

<table> 
    <tr> 
     <td class="editable status">something</td> 
     <td class="editable price">2</td> 
     <td class="checkbox"><input type="checkbox"/></td> 
    </tr> 
    <tr> 
     <td class="editable status">something else</td> 
     <td class="editable price">3</td> 
     <td class="checkbox"><input type="checkbox"/></td> 
    </tr> 
</table> 
<a id="edit" href="#edit">edit</a> 

jQuery를

$(function() { 

    // When edit is clicked... 
    $('#edit').on('click', function(){ 

     // For each ":checked" checkbox... 
     $('.checkbox INPUT:checked').each(function(){ 

      // Get the parent row... 
      var $row = $(this).closest('tr'); 

      // And that row's "editable" columns... 
      var $editable= $row.children('.editable'); 

      // Add the "editing" class... 
      $editable.addClass('editing'); 

      // And change all strings to INPUT fields. 
      $editable.each(function(){ 
       $(this).html('<input value="'+$(this).text()+'"/>'); 
      }); 

     }); 

    }); 


    // Also... 
    // Any time an .editing INPUT receives a keypress... 
    $('table').on('keypress', '.editing', function(e){ 

     // If the key pressed is ENTER... 
     if(e.which == 13){ 

      // Get the current row... 
      var $row = $(this).closest('tr'); 

      // Get the editable columns... 
      var $editable = $row.children('.editable'); 

      // Remove the class... 
      $editable.removeClass('editing'); 

      // Change back to string... 
      $editable.each(function(){ 
       $(this).html($(this).find('INPUT').val()); 
      });   

     } 

    }); 

}); 

Answer 2

하는 유지하기가 어렵고 내 선호하는 스타일이 아닙니다. (id는 HTML을 쓰고 내부에 PHP를 넣습니다.) 그러나 이것은 여러분의 질문에 도움이 될 것입니다 : http://jsfiddle.net/swm53ran/28/.

댓글의 내용 show what 's happen. 본질적으로 이미 jquery를 사용하여 이미 입력 된 데이터를 입력에 추가합니다. 하지만 PHP를 사용하고 있기 때문에 javascript 섹션에 빌드 된 html 코드 안에 <?php echo();?>을 삽입하여 아래 코드를 수정할 수 있습니다.

<tr> 
     <td class="name">php echo name here</td> 
     <td class="description">php echo description here</td> 
     <td class="data">php echo data here</td> 
     <td><a href="#" class="edit btn btn-primary">Edit Info</a></td> 
    </tr> 


$('.edit').on('click', function() { 
    var row = $(this).closest('tr'); 

    ***NOT NECESSARY SECTION OF CODE BECAUSE YOU'RE USING PHP (JUST FOR DEMO)**** 
    //collect data thats there (you dont have to do this if you have php, 
    //then you can just code in <?php echo();?> into your html building in 
    //javascript) because i have no php here 

    var name = row.find('.name').html(); 
    var description = row.find('.description').html(); 
    var data = row.find('.data').html(); 
    ***END OF NOT NECESSARY SECTION**** 

    //construct inputs to be inserted into cells 
    //since you're using php, you modify the below code to something like this: 
    //var nameInput = '<input type="text" value="<?php echo('name');?>"/>'; 
    //but you have to be careful because^this code wont work because of the 
    //nested parenthesis escape each other, so just put like <?php echo('name');?> 
    //into another variable and stick the variable in instead. 

    var nameInput = '<input type="text" value="'+ name +'"/>'; 
    var descriptionInput = '<input type="text" value="'+ description +'"/>'; 
    var dataInput = '<input type="text" value="'+ data +'"/>'; 

    //remove all contents and append inputs 
    row.find('.name').html('').append(nameInput); 
    row.find('.description').html('').append(descriptionInput); 
    row.find('.data').html('').append(dataInput); 
}); 

희망이 있습니다. 입력에 변환 모든 "편집"열, 해당 행이 ": : 선택"

때