<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body onload="myFunction()">
<script>
function myFunction() {
var input = document.createElement("TEXTAREA");
input.setAttribute('cols',50);
input.setAttribute('rows',10);
input.setAttribute("id", "myInput");
document.body.appendChild(input);
document.getElementById("myInput").style.fontSize = "25px";
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);
document.getElementById("myTable").style.fontSize = "40px";
var y = document.createElement("TR");
y.setAttribute("id", "myTr");
y.setAttribute("fontSize", "10px");
document.getElementById("myTable").appendChild(y);
let arr_ru = ['а', 'б', 'в', 'г', 'д', 'е', 'ё', 'ж', 'з', 'и', 'й', 'к', 'л', 'м', 'н', 'о', 'п', 'р', 'с', 'т', 'у', 'ф', 'х', 'ц', 'ч', 'ш', 'щ', 'ь', 'ы', 'ъ', 'э', 'ю', 'я'];
let arr_RU = ['А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ё', 'Ж', 'З', 'И', 'Й', 'К', 'Л', 'М', 'Н', 'О', 'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 'Ь', 'Ы', 'Ъ', 'Э', 'Ю', 'Я'];
for (var index = 0;index<33;index++)
{
var z = document.createElement("TD");
var t = document.createTextNode(arr_ru[index]);
z.appendChild(t);
document.getElementById("myTr").appendChild(z);
}
var y2 = document.createElement("TR");
y2.setAttribute("id", "myTr2");
y2.setAttribute("fontSize", "10px");
document.getElementById("myTable").appendChild(y2);
for (var index = 0;index<33;index++)
{
var z = document.createElement("TD");
var t = document.createTextNode(arr_RU[index]);
z.appendChild(t);
document.getElementById("myTr2").appendChild(z);
}
var br = document.createElement("BR");
document.body.appendChild(br);
var btn = document.createElement("BUTTON");
btn.innerHTML = "ПРОБЕЛ";
document.body.appendChild(btn);
btn.onclick =function(){
document.getElementById("myInput").innerHTML += " ";
}
document.getElementById("myTr").onmouseover = function(event) {
let target = event.target;
target.style.background = 'pink';
};
document.getElementById("myTr").onmouseout = function(event) {
let target = event.target;
target.style.background = '';
};
document.getElementById("myTr").onclick = function(event) {
let target = event.target;
target.style.background = 'red';
document.getElementById("myInput").innerHTML += target.innerHTML;
};
document.getElementById("myTr2").onmouseover = function(event) {
let target = event.target;
target.style.background = 'pink';
};
document.getElementById("myTr2").onmouseout = function(event) {
let target = event.target;
target.style.background = '';
};
document.getElementById("myTr2").onclick = function(event) {
let target = event.target;
target.style.background = 'red';
document.getElementById("myInput").innerHTML += target.innerHTML;
};
document.onkeypress = function(event){
var symbol = String.fromCharCode(event.keyCode);
document.getElementById("myInput").innerHTML += symbol;
document.getElementById("myInput").blur();
};
}
</script>
</body>
</html>
| 