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. То есть таблица заведомо не должна быть очень большой.
|
Цитата:
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td{
border: #FF0000 1px solid
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$.fn.setCursorPosition = function (b) {
this.each(function (c, a) {
a.focus();
if (a.setSelectionRange) a.setSelectionRange(b, b);
else if (a.createTextRange) {
var d = a.createTextRange();
d.collapse(!0);
d.moveEnd("character", b);
d.moveStart("character", b);
d.select()
}
});
return this
};
$(document).ready(function () {
var b = JSON.parse(localStorage.getItem("tds")) || {},
c = document.querySelectorAll("td"),
a;
for (a in b) c[a] && (c[a].innerHTML = b[a]);
$("table").on("click", "td", function () {
var a = $(this),
c = a.html(),
e = $("td").index(a),
f = $("<input/>", {
value: c,
click: function (a) {
a.stopPropagation()
},
blur: function () {
b[e] = this.value;
localStorage.setItem("tds", JSON.stringify(b));
a.html(b[e])
}
});
a.html(f);
f.setCursorPosition(c.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>
<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>
|
Я об этом крипто:
$("table").on("click", "td", function () {
если расшифровать то будет td.addEventListener(); или не будет? |
Цитата:
|
Скрипт очень хорош , при изменение значения всё происходит как надо , но сохраняется первый потомок. Можно сделать скрипт для неограниченного количества потомков ?
|
Цитата:
|
Да ...
<tbody> //Первый <td></td> // второй <td></td> </tbody> ... и так далее по счету |
Pro808,
скрипт сохраняет изменения для любой ячейки какая бы она ни была по счёту и общее количество ячеек также любое в пределах localStorage |
P.S. загрузил на локалку , заполнил то что было нужно , но в итоге сохранился первый столбец , первые потомки .
|
Pro808,
структуру вашей таблицы покажите? Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Pro808,
здесь таблица 2 столбца -- здесь как сохраняет? |
http://script-help.hol.es/
Можно проверить , а затем можно скачать страничку и убедиться в том что сохранился столбец только под номером "1" |
Редактирование текста ячеек таблицы с сохранением
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>
|
Вроде всё.
|
http://fscreen.ru/Y23cXg14114211633
Скриншот после перезагрузки страниц. ( на компьютере и на винде XP (справа)) Скачал файл через cpanel , в итоге всё пусто , делается куки по-моему . |
Цитата:
записанное запустите на странице один раз
<script>
localStorage.setItem("tds", null);
</script>
|
Нет в том то и дело что нечего не сохраняется на сервер , скачал файл с сервера он пустой , а мне нужно с сохранение введенных данных.
На предыдущей пикче , слева я ввел данные , справа я зашел на локальный компьютер и там нет ничего в таблице , нечего не сохранилось ... |
Цитата:
|
Цитата:
|
ОлегА, Поможешь ?
|
Pro808, пишите в личку.
|
| Часовой пояс GMT +3, время: 16:45. |