JavaScript копирование значение и введение в дргой селектор
Кто подскажет код ... При нажатие на якокрь <a></a> с определенным ID появлялось окно prompt и при введение в него значение ( цифры ) , оно( значение ) записывалось в таблицу tbody tr td .
1.Введение значения 2.Сохранение значения 3.Замена значения в таблице на введенное Можно реализовать , даже если не через prompt ? Заранее благодарен ! |
Сделайте таблицу editable и не парьтесь.
|
Спасибо за идею , но содержимое после обновления страницы не сохраняется. Можно ли это как-нибудь исправить ?
|
<div id="content">
<script type="text/javascript">
function change()
{
var number_1 = document.getElementsByClassName('number')[0].innerHTML; // Получаем Содержимое селектора
var number = prompt("Введите значение"); // number получает значение от пользователя
number_1.replace(number_1 , number); // Должен изменить
}
</script>
<table border="1">
<thead>
<tr>
<td class="number" onclick="change()">Этот текст поменять на другой текст</td>
</tr>
</thead>
</table>
</div>
Пришел к этому варианту. Что не так ? |
Цитата:
|
Короче, editable элементы не генерят событий, отчего юзать их можно только тотально. То есть навалом сохранять все введенное барахло не различая изменений или вычислять их сравнением.
Поэтому нарисуйте 1 input type="text" style="display:none;", и повесьте на всю таблицу (с tabindex обязательно!) событие click на которое сделайте callback. Событие поступившее в функцию даст вам элемент - ячейку. Из нее вы узнаете координаты ячейки и сможете подогнать input к щелкнутой ячейке и заменить ему elem.style.display="" в результате чего в ячейке кагбэ появится поле ввода. На это поле повесьте событие blur и функцию на него которая сохранит введенное значение. Это типичная фича всех datagrid. |
Редактирование текста ячеек таблицы с сохранением
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td{
border: #FF0000 1px solid
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$.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>
<table>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
</table>
</body>
</html>
|
xml сосет одним словом.
|
Огромное спасибо !
Спасибо kostyanet за советы ! рони спасибо за готовый код ! :thanks:
Карма Level UP ! :yes: |
Поначалу я тоже было повесил события на каждую строку, но строк оказалось может быть несколько килоштук, поэтому пришлось сообразить повесить ровно 1 на всю таблицу и получать ссылку на ячейку через объект Event. В приложенной выше скриптографии как я понимаю они вешаются на каждый cell. То есть таблица заведомо не должна быть очень большой.
|
| Часовой пояс GMT +3, время: 12:03. |