Демонстрация<!DOCTYPE html>
<html>
<head>
<s</a>cript src="http://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script>
$(document).ready(function() {
var alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
$("body").append("<table><tr class='alphabet'><td class='none'>|||<\/td><\/tr><\/table>");
for(var i = 0; i < alphabet.length; i++) {
$(".alphabet").append("<td>"+ alphabet[i] +"<\/td>");
/*if(alphabet.length-1 == i) {
for(var x = 0; x <= 25; x++) {
for(var y = 0; y <= 25; y++) {
$(".alphabet").append("<td>"+ alphabet[x] + alphabet[y] +"<\/td>");
}
}
}*/
}
for(var x = 1; x <= 1024; x++) {
$("table").append("<tr class='user'><td class='count'>"+ x +"<\/td><\/tr>");
}
for(var i = 0; i < alphabet.length; i++) {
$(".user").append("<td id='editable'><\/td>");
/*if(alphabet.length - 1 == i) {
for(var x = 0; x <= 25; x++) {
for(var y = 0; y <= 25; y++) {
$(".user").append("<td id='editable'><\/td>");
}
}
}*/
}
$("td#editable").dblclick( function(event){
$("input#foredit").remove();
var value = $(this).text();
$(this).html("<input id='foredit' onkeypress='check()' focused placeholder='input' value='" + value + "'>").focus();;
});
});
</script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
table {
border-spacing: 0;
}
:focus {
outline: none;
}
td {
border: 1px solid #D0D0D0;
min-width: 100px;
padding: 0 15px;
height: 40px;
}
td.none {
min-width: 0;
width: 25px!important;
}
td.count {
background: #E0E0E0;
min-width: 0;
width: 25px!important;
padding: 0;
text-align: center;
}
tr.alphabet td {
height: 30px;
text-align: center;
background: #E0E0E0;
background: -webkit-linear-gradient(to top, #E0E0E0 , #F2F2F2);
background: linear-gradient(to top, #E0E0E0 , #F2F2F2);
border: none;
border-right: 1px solid #D0D0D0;
}
#overlay {
z-index: 3;
position: fixed;
background-color: transparent;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
</body>
</html>
