Форум

hack3p · #1 (**permalink**) 26.03.2015, 13:46

Здравствуйте, потихоньку осваиваю JS.
Пытаюсь сделать живое редактирование таблицы, однако данный скрипт преобразует оба <td> в input, а нужно, чтобы только второй <td> преобразовался. Пожалуйста помогите

Пример:

<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>

Заранее спасибо!

newuser1001 · #2 (**permalink**) 26.03.2015, 15:04

<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>

hack3p · #3 (**permalink**) 26.03.2015, 15:21

newuser1001, Спасибо большое!

А как сейчас забирать данные из "editable"?

Если например будет вот такой вариант

<td class="editable 1">2</td>

Где: 1 - id предмета, 2 - оценка

Т.е. на выходе мы получаем
id = 1;
rate = 2;

Заранее спасибо!

рони · #4 (**permalink**) 26.03.2015, 15:28

hack3p,
редактирование таблицы

newuser1001 · #5 (**permalink**) 26.03.2015, 15:33

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>

hack3p · #6 (**permalink**) 26.03.2015, 16:17

newuser1001 и рони Большое спасибо!

Сделал вот такой вариант, однако 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>

laimas · #7 (**permalink**) 26.03.2015, 16:32

id.innerHTML - id у вас, это значение атрибута, а разве может это значение иметь содержимое?

var id = $(obj);
        console.log(id.id);
        console.log(id.innerHTML);

newuser1001 · #8 (**permalink**) 26.03.2015, 16:34

Я 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>

hack3p · #9 (**permalink**) 26.03.2015, 17:54

newuser1001 спасибо!

Однако теперь Ajax не отправляет данные)
Хотя в консоли страницу загружает (index.php) с ответом 200, но сам скрипт index.php не получает данные. Опять я чего-то поломал

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
            }
    )

newuser1001 · #10 (**permalink**) 26.03.2015, 18:05

hack3p,
Попробуйте переместить ф-цию с ajax в конец скрипта

Форум

Справочник

Discord чат

Курсы javascript