Pro808, посмотрите где и в какой последовательности находятся скрипты
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Как сделать</title>
<style type="text/css">
.help table
{
height: 400px;
width: 800px;
}
.help table thead th
{
height: 49px;
font-size: 18px;
text-align: center;
border: 1px solid #141414;
border-left: none;
}
.help table thead th:first-child
{
border-left: 1px solid #141414;
}
.help table thead th:nth-child(2)
{
color: #3B3B3B;
}
.help table thead th:nth-child(3)
{
color: #038703;
}
.help table thead th:nth-child(4)
{
color: #E59A16;
}
.help table thead th:last-child
{
color: red;
}
.help table tbody td
{
font-weight: bold;
height: 40px;
font-size: 18px;
text-align: center;
border: 1px solid #141414;
border-left: none;
border-top: none;
}
.help table tbody td:first-child
{
border-left: 1px solid #141414;
}
.help table tbody td:nth-child(2)
{
color: #3B3B3B;
}
.help table tbody td:nth-child(3)
{
color: #038703;
}
.help table tbody td:nth-child(4)
{
color: #E59A16;
}
.help table tbody td:last-child
{
color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$.fn.setCursorPosition = function(pos) {
this.each(function(index, elem) {elem.focus();
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this;
};
$(document)
.ready(function () {
var tds = JSON.parse(localStorage.getItem("tds")) || {};
var td = document.querySelectorAll("td");
Object.keys(tds).forEach(function f(i) {
td[i] && (td[i].innerHTML = tds[i])
});
$("td")
.click(function () {
var td = $(this),
text = td.html(),
$indx = $("td").index(td),
varX = $("<input/>", {
"value": text,
"click": function (event) {
event.stopPropagation()
},
"blur": function () {
tds[$indx] = $(this).val();
localStorage.setItem("tds", JSON.stringify(tds));
td.html($(this).val())
}
});
td.html(varX);
varX.setCursorPosition(text.length)
});
});
</script>
</head>
<body>
<div class="help">
<table cellspacing="0" >
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>
</tbody>
</table>
</div>
</body>
</html>
