Home>

Effect picture:

html:

 <table>
    <tr>
      <th>name</th>
      <th>age</th>
      <th>post</th>
      <th>salary</th>
      <th>operation</th>
    </tr>
    <tr>
      <td>Zhang San</td>
      <td>23</td>
      <td>Front-end engineer</td>
      <td>10000</td>
      <td>
        <a href="###">View</a>
        <a href="#">delete</a>
        <a href="#">Modify</a>
      </td>
    </tr>
    <tr>
      <td>Lee Si</td>
      <td>33</td>
      <td>java program ape</td>
      <td>12000</td>
      <td>
        <a href="#">View</a>
        <a href="#">delete</a>
        <a href="#">Modify</a>
      </td>
    </tr>
    <tr>
      <td>Wang Wu</td>
      <td>25</td>
      <td>Artist</td>
      <td>9000</td>
      <td>
        <a href="#">View</a>
        <a href="#">delete</a>
        <a href="#">Modify</a>
      </td>
    </tr>
  </table>
  <div>
    <p><strong>Name:</strong><span></span></p>
    <p><strong>Age:</strong><span></span></p>
    <p><strong>Post:</strong><span></span></p>
    <p><strong>Salary:</strong><span></span></p>
    <a href="#">Close</a>
  </div>
  <div>
    <p><strong>Name:</strong><input type="text"></p>
    <p><strong>Age:</strong><input type="text"></p>
    <p><strong>Post:</strong><input type="text"></p>
    <p><strong>Salary:</strong><input type="text"></p>
    <a href="#">OK</a>
    <a href="#">Cancel</a>
  </div>

css:

#table {
    border:1px solid #ccc;
    border-collapse:collapse;
    width:600px;}
  #table tr {height:30px;}
  #table tr:nth-child (2n) {background-color:#eee;}
  #table tr th, td {border:1px solid #ccc;text-align:center;
  }
  td a {
    color:red;
  }
  .popdiv {
    width:500px;
    border:1px solid purple;
    position:absolute;
    top:50%;left:50%;
    margin-left:-250px;
    margin-top:-100px;
    background:#fff;
    padding:10px;
    display:none;
    z-index:3;
    border:1px solid #ccc;
  }
  .popdiv p {border:1px solid #ccc;padding:5px;}
  .modifydiv {
    width:500px;
    border:1px solid purple;
    position:absolute;
    top:50%;left:50%;
    margin-left:-250px;
    margin-top:-100px;
    background:#fff;
    padding:10px;
    display:none;
    z-index:3;
    border:1px solid #ccc;
  }
  .modifydiv p {border:1px solid #ccc;padding:5px;}

jq:

$(function () {
    //View
    $("td a.view"). click (function () {
      /** Add mask layer * /
      var maskheight=$(document) .height ();
      var maskwidth=$(document) .width ();
      $("<Div></div>"). Appendto ($("body"));
      $("div.mask"). css ({
        "opacity":0.4,        "background":"#000",        "position":"absolute",        "left":0,        "top":0,        "width":maskwidth,        "height":maskheight,        "z-index":2
      })
      var arr=[];
      $(this) .parent (). siblings (). each (function () {
        arr.push ($(this) .text ());
      });
      $(". popdiv"). show (). children (). each (function (i) {
        $(this) .children ("span"). text (arr [i]);
      });
      $(". close"). click (function () {
        $(this) .parent (). hide ();
        $(". mask"). remove ();
      });
    });
    //delete
    $("a.del"). click (function () {
      $(this) .parents ("tr"). remove ();
    });
    /* Modify function * /
  })
//When the page loads,Make all tds have click events
$(document) .ready (function () {
  //Find all td nodes
  var tds=$("td"). not (":last-child");
  //Add a click event to all td nodes
  tds.dblclick (tdclick);
});
function tdclick () {
  var clickfunction=this;
  //0, get the current td node
  var td=$(this);
  //1, take out the text content in the current td and save it
  var text=$(this) .text ();
  //2, empty the same inside td
  td.html ("");
  //3, create a text box,Which is to create an input node
  var input=$("<input>");
  //4, set the value in the text box to be the saved text content
  input.attr ("value", text);
  //4.5 Make the text box respond to the keyboard down event
  input.keyup (function (event) {
    //Key value of the current user of the card reader
    var myevent=event || window.event;//Get event objects in different browsers
    var kcode=myevent.keycode;
    //Determine if it is the Enter key pressed
    if (kcode == 13) {
      var inputnode=$(this);
      //Get the content of the current text box
      var inputext=inputnode.val ();
      //Empty the contents of td,Then fill the content inside
      var tdnode=inputnode.parent ();
      tdnode.html (inputext);
      //Let td have the click event again
      tdnode.click (tdclick);
    }
  }). blur (function () {
      var inputnode=$(this);
      //Get the content of the current text box
      var inputext=inputnode.val ();
      //Empty the contents of td,Then fill the content inside
      var tdnode=inputnode.parent ();
      tdnode.html (inputext);
      //Let td have the click event again
      tdnode.click (tdclick);
    });
  //5, add the text box to td
  td.append (input);
  //5.5 let the article in the text box be highlighted
  //Need to convert jquery object into dom object
  var inputdom=input.get (0);
  inputdom.select ();
  //6, need to be clear about the click event on td
  td.unbind ("click");
}
  • Previous Datagridview use skills (9) Right-click menu of Datagridview
  • Next Detailed key namespace examples of PHP