Помощь с таблицей
Здравствуйте, потихоньку осваиваю JS.
Пытаюсь сделать живое редактирование таблицы, однако данный скрипт преобразует оба <td> в input, а нужно, чтобы только второй <td> преобразовался. Пожалуйста помогите:help: :-? Пример: <td>Математика</td> <td> 5 </td> <td>Математика</td> <td><input type="text" value=5></td>
(function(){
var table = document.getElementById('edit');
for (var i = 0; i < table.tBodies[0].rows.length; i++) {
var row = table.tBodies[0].rows[i];
row.onclick = onRowClick;
}
function onRowClick(event) {
var target = event ? event.target : window.event.srcElement;
this.onclick = null;
this.className = 'editable';
for (var i = 0; i < this.cells.length i++) {
var cell = this.cells[i];
var input = document.createElement('input');
input.setAttribute('type', cell.getAttribute('data-type') || 'text');
input.value = cell.firstChild.data;
dump(input.value);
cell.replaceChild(input, cell.firstChild);
if (cell == target)
input.focus();
}
}
})();
<table id="edit"> <thead> <tr> <td> <b>Предмет</b> </td> <td> <b>Оценка</b> </td> </tr> </thead> <tbody> <td> Алгебра </td> <td> 4 </td> <td> Русский </td> <td> 4 </td> <td> Литература </td> <td> 4 </td> <td> Химия </td> <td> 4 </td> </tbody> </table> Заранее спасибо! |
<html>
<head>
<style>
.editable{
width: 50px;
height: 20px;
border: 1px solid black
}
</style>
</head>
<body>
<table>
<tr>
<td><div class="editable"></td>
<td><div class="editable"></td>
</tr>
<tr>
<td><div class="editable"></td>
<td><div class="editable"></td>
</tr>
</table>
<script>
;[].forEach.call(document.querySelectorAll(".editable"), function(x){x.contentEditable="true"})
</script>
</body>
</html>
|
newuser1001, Спасибо большое!:victory:
А как сейчас забирать данные из "editable"? Если например будет вот такой вариант <td class="editable 1">2</td> Где: 1 - id предмета, 2 - оценка Т.е. на выходе мы получаем id = 1; rate = 2; Заранее спасибо! |
|
hack3p,
Забирайте как обычно, это же обычный HTML-элемент. Например
<html>
<head>
<style>
.editable{
width: 50px;
height: 20px;
border: 1px solid black
}
</style>
</head>
<body>
input some text:
<div class="editable" id="src">foo</div>
<br>
<button id="show">show</button>
<br>
result:
<br>
<div id="info" ></div>
<script>
;[].forEach.call(document.querySelectorAll(".editable"), function(x){x.contentEditable="true"})
show.onclick=function(){
info.innerHTML=src.innerHTML
}
</script>
</body>
</html>
|
newuser1001 и рони Большое спасибо!:victory:
Сделал вот такой вариант, однако console.log(id.innerHTML); пишет undefined. Что я не правильно сделал?:)
$(document).ready(function() {
$('.editable').click(function() {
getId(this);
});
});
function getId(obj)
{
var id = $(obj).attr('id');
console.log(id);
console.log(id.innerHTML);
}
<td class="editable" id="n">5</td> |
id.innerHTML - id у вас, это значение атрибута, а разве может это значение иметь содержимое?
var id = $(obj);
console.log(id.id);
console.log(id.innerHTML);
|
Я jq толком не знаю. На js можно так
<html>
<head>
</head>
<body>
<table>
<tr>
<td class="editable" id="n">5</td>
</tr>
</table>
<script>
get=function(){console.log(this.id, this.innerHTML)}
;[].forEach.call(document.querySelectorAll(".editable"), function(el){el.onclick=get})
</script>
</body>
</html>
|
newuser1001 спасибо!:victory:
Однако теперь Ajax не отправляет данные) Хотя в консоли страницу загружает (index.php) с ответом 200, но сам скрипт index.php не получает данные. Опять я чего-то поломал:yes: Console.log выводит все переменные, т.е. они не пустые во время отправки
// Добавляем оценки по предметам
addSubjects = function()
{
var id = this.id;
var rate = this.innerHTML;
var page = "PersonalPage";
var action = "addSubjects";
console.log(id, rate, page, action);
$.ajax
(
{
type: "POST",
url: "form.php",
dataType: "html",
data: "page="+page+
"&action="+action+
"&id="+id+
"&rate="+rate,
success: function(response)
{
// выводим
$("#content").append(html);
}
}
);
}
;[].forEach.call
(
document.querySelectorAll(".editable"),
function(x)
{
x.contentEditable="true"
}
)
;[].forEach.call
(
document.querySelectorAll(".editable"),
function(y)
{
y.onclick=addSubjects
}
)
|
hack3p,
Попробуйте переместить ф-цию с ajax в конец скрипта |
| Часовой пояс GMT +3, время: 10:42. |