Изменение значения TD во OnClick

Question

Ниже мой HTML:

  <form method="post" > 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
      <table class="table table-condensed1" > 
      <tbody> 
       <tr> 
       <td>Email</td> 
       <td><span><?php echo $row['Admin_Email'];?></span> <input type="text" name="email" size="30" autocomplete="off" class="hidden"></td> 
        <td><a href="#" class="edit">Edit</a></td> 
       </tr> 
       <tr> 
        <td>Name </td> 
       <td><span><?php echo $row['Admin_Name'];?></span> <input type="text" name="name" size="30" autocomplete="off" class="hidden"></td> 
        <td><a href="#" class="edit">Edit</a></td> 
       </tr> 
       <tr> 
        <td>Gender</td> 
       <td><span><?php echo $row['Admin_Gender'];?></span> <input type="text" name="gend" size="10" autocomplete="off" class="hidden"></td> 
        <td><a href="#" class="edit">Edit</a></td> 
       </tr> 
       <tr> 
        <td >Date of Birth</td> 
       <td><span><?php echo $row['Admin_DOB'];?></span> <input type="date" name="dob" autocomplete="off" class="hidden"></td> 
        <td><a href="#" class="edit">Edit</a></td> 
       </tr> 
       <tr> 
        <td >Contact Number</td> 
       <td><span><?php echo $row['Admin_ContactNum'];?></span> <input type="text" name="num" size="15" autocomplete="off" class="hidden"></td> 
        <td><a href="#" class="edit">Edit</a></td> 
       </tr> 
       <tr> 
        <td>Address</td> 
       <td><span><?php echo $row['Admin_Address'];?></span> <input type="text" name="add" size="100" autocomplete="off" class="hidden"></td> 
        <td><a href="#" class="edit">Edit</a></td> 
       </tr> 
      </tbody> 
     </table> 
</form> 

устанавливаемого сотовый код, чтобы скрыть class="hidden" текстовое поле:

.hidden { 
    display: none; 
} 

Моего Jquery изменить редактирование, чтобы сохранить и показать текстовое поле ввода , а затем покажет панель уведомлений, когда пользователь нажал на сохранение:

<script> 
$(document).ready(function(){ 

$(".table").on("click", ".edit", function() { 
    var prevTD = $(this).parent().prev(); 
    var value = prevTD.find("span").hide().text(); 
    prevTD.find("input").show().val(value); 
    $(this).toggleClass("edit save").text("Save"); 
}).on("click", ".save", function() { 
    var prevTD = $(this).parent().prev(); 
    var value = prevTD.find("input").hide().val(); 
    prevTD.find("span").show().text(value); 
    $(this).toggleClass("edit save").text("Edit"); 

$("form").submit(function() { $(this).find("input").show(); }); 




    jNotify(
    '<img src="../Images/success.png" height="15px"/> Profile updated!', 
    { 
     autoHide : true, 
     MinWidth: 150, 
     TimeShown : 2500, 
     OpacityOverlay : 0 , 
     HorizontalPosition : 'right', 
     VerticalPosition: 'bottom' 
    }) 



}); 


}); 

</script> 

Мой PHP-код для обновления моего член таблицы:

$email = $_POST["email"]; 
    $name = $_POST["name"]; 
    $gend = $_POST["gend"]; 
    $dob = $_POST["dob"]; 
    $num = $_POST["num"]; 
    $address1 = $_POST["add"]; 




mysqli_query($conn, "UPDATE admin SET Admin_Email ='$email' , Admin_Name='$name', Admin_Gender='$gend', Admin_DOB='$dob', Admin_ContactNum='$num', Admin_Address='$address1' WHERE Admin_ID=$id"); 

Я не смог получить текст, введенный в <input type="text" name="name" size="30" autocomplete="off" class="hidden">. Как получить этот текст? Я хочу получить текст и объявить в своем php, где я могу сделать $name = $_POST["name"]; и обновить таблицу в базе данных.

Answer 1

Вы можете сделать что-то подобное с помощью contenteditable атрибута

$('.table tr>td a').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this) 
 
    .closest('tr') 
 
    // get the table row 
 
    .find('td:eq(1)') 
 
    // get second column 
 
    .prop('contenteditable', $(this).text() == 'Edit') 
 
    // setting td as editable 
 
    .focus() 
 
    // focusing the td 
 
    .end().end() 
 
    // back to button 
 
    .text($(this).text() == 'Edit' ? 'Save' : 'Edit'); 
 
    // update button text 
 
});

.table-condensed1 { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    margin-bottom: 20px; 
 
} 
 
.table-condensed1 td { 
 
    font-size: 20px; 
 
} 
 
.table-condensed1 td:first-child { 
 
    font-weight: 700; 
 
} 
 
.table-condensed1 td:last-child, 
 
.table-condensed1 td:last-child a { 
 
    color: #0078b0; 
 
} 
 
.table-condensed1 td:last-child, 
 
.table-condensed1 td:last-child a:hover { 
 
    color: #2ba6cb; 
 
    background-color: white; 
 
} 
 
.table-condensed1 > thead > tr > th, 
 
.table-condensed1 > tbody > tr > th, 
 
.table-condensed1 > tfoot > tr > th, 
 
.table-condensed1 > thead > tr > td, 
 
.table-condensed1 > tbody > tr > td, 
 
.table-condensed1 > tfoot > tr > td { 
 
    border-top: 0px solid white; 
 
    border-bottom: 1px solid #efefef; 
 
    border-bottom-width: thin; 
 
    padding: 10px; 
 
} 
 
.table-condensed1 tr:hover { 
 
    background-color: #f5f5f5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="table table-condensed1"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Email</td> 
 
     <td> 
 
     <?php echo $row[ "Admin_Email"];?> 
 
     </td> 
 
     <td><a href="">Edit</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Name</td> 
 
     <td> 
 
     <?php echo $row[ "Admin_Name"];?> 
 
     </td> 
 
     <td><a href="">Edit</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Gender</td> 
 
     <td> 
 
     <?php echo $row[ "Admin_Gender"];?> 
 
     </td> 
 
     <td><a href="">Edit</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Date of Birth</td> 
 
     <td> 
 
     <?php echo $row[ "Admin_DOB"];?> 
 
     </td> 
 
     <td><a href="">Edit</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Contact Number</td> 
 
     <td> 
 
     <?php echo $row[ "Admin_ContactNum"];?> 
 
     </td> 
 
     <td><a href="">Edit</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Address</td> 
 
     <td> 
 
     <?php echo $row[ "Admin_Address"];?> 
 
     </td> 
 
     <td><a href="#top">Edit</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

Put промежуток, содержащий обычный текст и вход, который пользователь может изменить в TD. Когда пользователь нажимает на кнопку редактирования, скрыть диапазон, отобразить ввод и изменить класс и текст кнопки. Идите наоборот, когда они нажимают кнопку сохранения.

$(".table").on("click", ".edit", function() { 
 
    var prevTD = $(this).parent().prev(); 
 
    var value = prevTD.find("span").hide().text(); 
 
    prevTD.find("input").show().val(value); 
 
    $(this).toggleClass("edit save").text("Save"); 
 
}).on("click", ".save", function() { 
 
    var prevTD = $(this).parent().prev(); 
 
    var value = prevTD.find("input").hide().val(); 
 
    prevTD.find("span").show().text(value); 
 
    $(this).toggleClass("edit save").text("Edit"); 
 
}); 
 
// Unhide all the hidden inputs when submitting the form 
 
$("form").submit(function() { 
 
    $(this).find("input").show(); 
 
});

.table-condensed1 { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    margin-bottom: 20px; 
 
} 
 
.table-condensed1 td { 
 
    font-size: 20px; 
 
} 
 
.table-condensed1 td:first-child { 
 
    font-weight: 700; 
 
} 
 
.table-condensed1 td:last-child, 
 
.table-condensed1 td:last-child a { 
 
    color: #0078b0; 
 
} 
 
.table-condensed1 td:last-child, 
 
.table-condensed1 td:last-child a:hover { 
 
    color: #2ba6cb; 
 
    background-color: white; 
 
} 
 
.table-condensed1 > thead > tr > th, 
 
.table-condensed1 > tbody > tr > th, 
 
.table-condensed1 > tfoot > tr > th, 
 
.table-condensed1 > thead > tr > td, 
 
.table-condensed1 > tbody > tr > td, 
 
.table-condensed1 > tfoot > tr > td { 
 
    border-top: 0px solid white; 
 
    border-bottom: 1px solid #efefef; 
 
    border-bottom-width: thin; 
 
    padding: 10px; 
 
} 
 
.table-condensed1 tr:hover { 
 
    background-color: #f5f5f5; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-condensed1"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Email</td> 
 
     <td><span>Admin_Email</span> 
 
     <input type="text" class="hidden"> 
 
     </td> 
 
     <td><a href="#" class="edit">Edit</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Name</td> 
 
     <td><span>Admin_Name</span> 
 
     <input type="text" class="hidden"> 
 
     </td> 
 
     <td><a href="#" class="edit">Edit</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Gender</td> 
 
     <td><span>Admin_Gender</span> 
 
     <input type="text" class="hidden"> 
 
     </td> 
 
     <td><a href="#" class="edit">Edit</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Date of Birth</td> 
 
     <td><span>Admin_DOB</span> 
 
     <input type="text" class="hidden"> 
 
     </td> 
 
     <td><a href="#" class="edit">Edit</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Contact Number</td> 
 
     <td><span>Admin_ContactNum</span> 
 
     <input type="text" class="hidden"> 
 
     </td> 
 
     <td><a href="#" class="edit">Edit</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Address</td> 
 
     <td><span>Admin_Address</span> 
 
     <input type="text" class="hidden"> 
 
     </td> 
 
     <td><a href="#" class="edit">Edit</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>