在onclick期间更改TD值

时间：2015-09-24 19:56:39

标签： php jquery css html-table

以下是我的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"文本框的CSS代码：

.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"];并在数据库中更新我的表。

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

放置包含普通文本的范围和用户可在TD中编辑的输入。当用户单击编辑按钮时，隐藏跨度，显示输入，并更改按钮的类和文本。当他们点击保存按钮时反之亦然。

＆＃13;
＆＃13; 
$(".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(); 
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题