Редактирование ячейки страницы
arr = [[1,2], [3,4]];
function tableEditor(idDiv, arr){
var div = document.createElement('div');
div.setAttribute('id', idDiv);
var table = document.createElement('table');
table.setAttribute('border', '1');
div.appendChild(table);
for(var i=0;i<arr.length;i++){
var tr = document.createElement('tr');
table.appendChild(tr);
for(var j=0;j<arr[i].length;j++){
var td = document.createElement('td');
td.innerHTML = arr[i][j];
tr.appendChild(td);
}
}
td.addEventListener('dblclick', function(){
var input = document.createElement('input');
input.setAttribute('type','text');
return td;
});
return div;
};
document.body.appendChild((tableEditor('container', arr)));
Подскажите пожалуйста как сделать: При даблклике контент ячейки подменяется на input. По даблклику по input измененые данные заносятся в оригинальный массив и input удаляется из ячейки, заменяясь измененным значением. |
|
рони,
Спасибо, но мне надо на чистом js |
редатирование ячеек таблицы js
Marson,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td input {
width: 70px;
background-color: #EEE8AA;
}
</style>
</head>
<body>
<div id="show"></div>
<script>
var arr = [
[1, 2],
[3, 4]
];
function tableEditor(idDiv, arr) {
var div = document.createElement("div");
div.setAttribute("id", idDiv);
var table = document.createElement("table");
table.setAttribute("border", "1");
div.appendChild(table);
for (var i = 0; i < arr.length; i++) {
var tr = document.createElement("tr");
table.appendChild(tr);
for (var j = 0; j < arr[i].length; j++) {
var td = document.createElement("td");
td.innerHTML = arr[i][j];
td.dataset.i = i;
td.dataset.j = j;
tr.appendChild(td)
}
}
var input = document.createElement("input");
input.setAttribute("type", "text");
table.addEventListener("dblclick", function(event) {
if (td = input.parentNode) {
td.removeChild(input);
i = td.dataset.i;
j = td.dataset.j;
td.textContent = arr[i][j] = +input.value;
show.innerHTML = JSON.stringify(arr, null, 4)
}
if (event.target.tagName == "TD") {
if (td != event.target) td = event.target;
input.value = td.textContent;
td.textContent = "";
td.appendChild(input)
}
});
return div
}
document.body.appendChild(tableEditor("container", arr));
</script>
</body>
</html>
|
<table contenteditable>
<tr><td>1<td>2
<tr><td>3<td>4
</table>
|
| Часовой пояс GMT +3, время: 15:58. |