редактирование таблиц - JavaScript, Ajax

linkoln_7 · 20.05.2015, 00:00

Здравствуйте,подскажите,как быть. Создаю таблицы,при клике на td в ячейке появляется текстовое поле,куда записываются данные с ячейки.Как мне перезаписать данные на новые и вставить их в ячейку?Как при нескольких нажатий на td не добавлять больше поля?

Код:

var table_id=0;
    function new_table() {
    var countTr = $("#tr").val();
    var countTd = $("#td").val();
    table_id++;
    $('#r').append("<table border ='1' id='t"+table_id+"'></table>");
    for (var i = 1; i <= countTr; i++) {
    $('#container #t'+table_id).append("<tr></tr>");
    for (var n = 1; n <= countTd; n++) {
     $('#container #t'+table_id+' tr:last').append("<td>" + i + "." + n + "</td>");
            }

        }
        $("table").draggable({ containment: 'parent' });

        $("table").resizable();

        $("table td").click(function () {
   $(this).html('<input type="text" size="4" value="' + $(this).html() + '" />');
  });
    };

Здравствуйте,подскажите,как быть. Создаю таблицы,при клике на td в ячейке появляется текстовое поле,куда записываются данные с ячейки.Как мне перезаписать данные на новые и вставить их в ячейку?Как при нескольких нажатий на td не добавлять больше поля?

Пример https://jsfiddle.net/Zkolya_linkoln/LLen1fpa/19/

SQLPowerUser · 20.05.2015, 09:33

Тут даже jQuery не нужен

Код HTML:

<!DOCTYPE html>
<html>
<head>
<title>Редактировать данные в таблице</title>
<style>
table {border-collapse:collapse;}
td,th {
  border:1px solid #ccc;
  padding:0;
}
td p {
  margin:0;
  padding:2px 4px;
}
td p:focus {outline:1px solid #4D90FE;}
</style>
</head>
<body onload="setSelect('example')">
<br><br><br>
<table id="example">
  <tr> <th>idx</th> <th>Дата</th> <th>Тема письма</th> </tr>
  <tr> <td>10</td> <td>01.07.2013</td> <td>Автоматическое оповещение об изменении статуса заявки</td> </tr>
  <tr> <td>20</td> <td>02.07.2013</td> <td>Строка 2</td> </tr>
  <tr> <td>30</td> <td>03.07.2013</td> <td>Автоматическое оповещение об изменении чего-то там</td> </tr>
  <tr> <td>40</td> <td>04.07.2013</td> <td>Строка 4</td> </tr>
  <tr> <td>50</td> <td>05.07.2013</td> <td>Еще тема письма</td> </tr>
</table>

<script>
function setSelect(idx) {
  var tbl = document.getElementById(idx);
  for (i=1; i<tbl.rows.length; i++) {
    var row = tbl.rows[i];
    for (j=0; j<row.cells.length; j++) {
      var td = row.cells[i,j];
      td.innerHTML = '<p tabindex="-1" contenteditable="true">' + td.innerHTML + '</p>';
    }
  }
}
</script>

</body>
</html>

Naive · 20.05.2015, 10:49

Цитата:

Сообщение от SQLPowerUser

Тут даже jQuery не нужен

Код HTML:

<!DOCTYPE html>
<html>
<head>
<title>Редактировать данные в таблице</title>
<style>
table {border-collapse:collapse;}
td,th {
  border:1px solid #ccc;
  padding:0;
}
td p {
  margin:0;
  padding:2px 4px;
}
td p:focus {outline:1px solid #4D90FE;}
</style>
</head>
<body onload="setSelect('example')">
<br><br><br>
<table id="example">
  <tr> <th>idx</th> <th>Дата</th> <th>Тема письма</th> </tr>
  <tr> <td>10</td> <td>01.07.2013</td> <td>Автоматическое оповещение об изменении статуса заявки</td> </tr>
  <tr> <td>20</td> <td>02.07.2013</td> <td>Строка 2</td> </tr>
  <tr> <td>30</td> <td>03.07.2013</td> <td>Автоматическое оповещение об изменении чего-то там</td> </tr>
  <tr> <td>40</td> <td>04.07.2013</td> <td>Строка 4</td> </tr>
  <tr> <td>50</td> <td>05.07.2013</td> <td>Еще тема письма</td> </tr>
</table>

<script>
function setSelect(idx) {
  var tbl = document.getElementById(idx);
  for (i=1; i<tbl.rows.length; i++) {
    var row = tbl.rows[i];
    for (j=0; j<row.cells.length; j++) {
      var td = row.cells[i,j];
      td.innerHTML = '<p tabindex="-1" contenteditable="true">' + td.innerHTML + '</p>';
    }
  }
}
</script>

</body>
</html>

А теперь протести в разных браузерах ентер, таб, контрол+В, ..+U, ..+I, попробуй перетащить картинку со страницы или рабочего стола =)
Не говоря уже о разных ОСях

SQLPowerUser · 20.05.2015, 11:10

contenteditable и tabindex работают даже в старых IE. Автор не говорил, что ему нужна обработка клавиш, drag and drop и прочие плюшки.
У него при щелчке на ячейку появляется input type = "text", и при щелчке на другую ячейку старые Edit не исчезают. Я всего лишь упростил его пример.

Naive · 20.05.2015, 12:14

Цитата:

Сообщение от SQLPowerUser

contenteditable и tabindex работают даже в старых IE. Автор не говорил, что ему нужна обработка клавиш, drag and drop и прочие плюшки.
У него при щелчке на ячейку появляется input type = "text", и при щелчке на другую ячейку старые Edit не исчезают. Я всего лишь упростил его пример.

Работать то работают, да, только вот в браузерах работает нативная обработка того, что я перечислил. И везде она разная.

linkoln_7 · 20.05.2015, 12:35

Всем большое спасибо!Очень выручили!

20.05.2015, 00:00	#1
linkoln_7 Форумчанин Регистрация: 04.03.2013 Сообщений: 164	редактирование таблиц Здравствуйте,подскажите,как быть. Создаю таблицы,при клике на td в ячейке появляется текстовое поле,куда записываются данные с ячейки.Как мне перезаписать данные на новые и вставить их в ячейку?Как при нескольких нажатий на td не добавлять больше поля? Код: var table_id=0; function new_table() { var countTr = $("#tr").val(); var countTd = $("#td").val(); table_id++; $('#r').append("<table border ='1' id='t"+table_id+"'></table>"); for (var i = 1; i <= countTr; i++) { $('#container #t'+table_id).append("<tr></tr>"); for (var n = 1; n <= countTd; n++) { $('#container #t'+table_id+' tr:last').append("<td>" + i + "." + n + "</td>"); } } $("table").draggable({ containment: 'parent' }); $("table").resizable(); $("table td").click(function () { $(this).html('<input type="text" size="4" value="' + $(this).html() + '" />'); }); }; Здравствуйте,подскажите,как быть. Создаю таблицы,при клике на td в ячейке появляется текстовое поле,куда записываются данные с ячейки.Как мне перезаписать данные на новые и вставить их в ячейку?Как при нескольких нажатий на td не добавлять больше поля? Пример https://jsfiddle.net/Zkolya_linkoln/LLen1fpa/19/

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
редактирование таблиц соединенных в Query	дараемон	БД в Delphi	6	28.03.2011 16:38
Редактирование связанных таблиц	Elizavetta	Помощь студентам	1	10.02.2011 14:02
Добавление/редактирование из нескольких таблиц, если для отображения используется Query	lyle_200490	БД в Delphi	1	28.11.2010 15:02
Редактирование связанных таблиц	formeram	БД в Delphi	2	11.09.2009 14:11

20.05.2015, 11:10	#4
SQLPowerUser Форумчанин Регистрация: 19.01.2015 Сообщений: 158	contenteditable и tabindex работают даже в старых IE. Автор не говорил, что ему нужна обработка клавиш, drag and drop и прочие плюшки. У него при щелчке на ячейку появляется input type = "text", и при щелчке на другую ячейку старые Edit не исчезают. Я всего лишь упростил его пример. Последний раз редактировалось SQLPowerUser; 20.05.2015 в 11:23.

20.05.2015, 12:35	#6
linkoln_7 Форумчанин Регистрация: 04.03.2013 Сообщений: 164	Всем большое спасибо!Очень выручили!