我创建了这个表来取代我们现在使用的访问数据库,一旦完成,我将把它链接到我们的主页。这只是我们的仪表列表的标题,标题行和第一行。我似乎无法保存我输入的数据。它是否设置为使用另一个按钮保存? 我可以双击单元格输入数据并按回车但是当我刷新页面时数据消失了,没有保存? 我做错了什么?
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
});
&#13;
* {
font-family:arial;
}
.editableTable {
border:1px solid white;
width:100%
}
.editableTable td {
border:1px solid white;
}
.editableTable .cellEditing {
padding: 5px;
}
.editableTable .cellEditing input[type=text]{
width:100%;
border:1px solid black;
background-color:rgb(255,253,210);
}
&#13;
<!DOCTYPE html>
<html>
<head>
<title>Active Calibrations</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<style>
body {
background-color: #002255;
}
table {
width:100%;
font-family: arial;
}
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
caption{
display: table-caption;
text-align: center;
color: white;
font-family: stencil;
font-size: 300%;
}
th, td {
padding: 5px;
text-align: center;
}
table#t01 tr:nth-child(even) {
background-color: #888888;
color: white;
}
table#t01 tr:nth-child(odd) {
background-color: #002255;
color: white;
}
table#t01 th {
background-color: #888888;
color: black;
font-family: arial black;
}
</style>
</head>
<body>
<table id="t01" style="width:100%"
table class="editableTable">
<caption>ACTIVE CALIBRATIONS</caption>
<br>
<thead>
<removeClass("cellEditing");
<tr>
<th>PLANT</th>
<th>TYPE</th>
<th>Serial#</th>
<th>LAST CAL</th>
<th>CAL DUE</th>
<th>LOCKER</th>
<th>MODEL</th>
<th>FREQ</th>
<th>RESPON</th>
<th>IN/OUT</th>
<th>REMARKS</th>
<th>RANGE</th>
<th>P-CAL</th>
<th>SECTION</th>
<th>MANUFACTURER</th>
<th>COST CAL</th>
<th>EQUIP COST</th>
</tr>
</thead>
<tbody>
<tr>
<td>Blanket</td>
<td>Gauge Block 1 mm</td>
<td>04061</td>
<td>8/27/15</td>
<td>8/27/17</td>
<td>Lab</td>
<td>Mitutoyo 614519-03</td>
<td>2 YRS</td>
<td></td>
<td>Out</td>
<td>Put in Service</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>$7.50</td>
<td>$25.00</td>
</tr>
</tbody>
</table>
</body>
</html>
&#13;