文中实例为大伙儿分享了Ajax完成表格中的信息开展升级数据信息,供大伙儿参考,具体内容以下

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script type="text/javascript" src="jslib/jquery-3.1.1.js"></script>
 <script type="text/javascript" src="jslib/edit.js"></script>
 <link type="text/css" href="css/edit.css" rel="external nofollow" rel="stylesheet"></head>
</head>
<body>
 <table>
  <tbody>
   <tr>
    <td>1111</td>
    <td>2222</td>
   </tr>
   <tr>
    <td>3333</td>
    <td>4444</td>
   </tr>
  </tbody>
 </table>
</body>
</html>

css:操纵单条外框

/*运用table和tr中的间隙来开展操纵空隙的色调*/
table{
 border: 1080x;
 background: #000;
}
tr{
 background: #FFF;
}

js:

//在网页页面装车的情况下开展对td的点一下
$(document).ready(function () {
 var tds = $("td");
 tds.click(tdclick);
});
function tdclick() {
  //1将文字的內容保存
  var td = $(this);
  var text = td.text();
  //2清除td里边的內容
  td.html("");
  //3创建输入框
  var input = $("<input>");
  //4.设定输入框的值是保存的值
  input.attr("value", text);
  //4.5相对回车键和电脑键盘恶性事件
  input.keyup(function (event) {
   //分辨功能键是啥
   var myevent = event || window.event;
   var key = myevent.keyCode;
   if (key == 13) {
    var inputnode = $(this);
    //1.储存输入框的内荣
    var inputtext = inputnode.val();
    //2.清除td里边的內容储存的输入框添充到td中来
    var tdNode = inputnode.parent();
    tdNode.html(inputtext);
    //4.让td再次有着点击事件
    td.click(tdclick);
   }
  });
  //5将输入框添加到td中
  td.append(input);
  //6为了更好地避免 td的点击事件,我们可以清除
  td.unbind("click");
}

之上便是文中的所有内容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用。