Редактируемая строка на чистом JS

303

24 октября 2017, 00:54

Требуется возможность редактировать строку, по нажатию кнопки в ячейке этой строки. В связи с этим 2 вопроса:

1) Решил сделать редактирование через свойство contentEditable, но не могу понять как выловить саму строку. Обращение к строке через переданный функции this результата не дало, результата либо нет, либо(как в указанном ниже примере) редактируемой становится вся таблица(что не нужно). Как можно реализовать данное редактирование?

2) Одним из требований является сохранение изменений по повторному клику на кнопку, которая его инициирует, как это можно реализовать? Есть ли свойство для этого?

Листинги кода. Функция remakeRow() вызывает редактирование всей таблицы(что естественно неверно)

var d = document; 
 
var Surname; 
var name; 
var name2; 
var name3; 
var name4; 
var name5; 
var name6; 
var name7; 
var name8; 
 
function AddRow() { 
    Surname = d.getElementById("Surname").value; 
    name = d.getElementById("name").value; 
    name2 = d.getElementById("name2").value; 
    name3 = d.getElementById("name3").value; 
    name4 = d.getElementById("name4").value; 
    name5 = d.getElementById("name5").value; 
    name6 = d.getElementById("name6").value; 
    name7 = d.getElementById("name7").value; 
    name8 = d.getElementById("name8").value; 
 
    var tbody = d.getElementById("T3").getElementsByTagName("tbody")[0]; 
 
    var row = d.createElement("tr"); 
    tbody.appendChild(row); 
 
    var td1 = d.createElement("td") 
    var td2 = d.createElement("td") 
    var td3 = d.createElement("td") 
    var td4 = d.createElement("td") 
    var td5 = d.createElement("td") 
    var td6 = d.createElement("td") 
    var td7 = d.createElement("td") 
    var td8 = d.createElement("td") 
    var td9 = d.createElement("td") 
 
    row.appendChild(td1); 
    row.appendChild(td2); 
    row.appendChild(td3); 
    row.appendChild(td4); 
    row.appendChild(td5); 
    row.appendChild(td6); 
    row.appendChild(td7); 
    row.appendChild(td8); 
    row.appendChild(td9); 
 
    var deleteB = document.createElement('input'); 
    deleteB.value = 'delete'; 
    deleteB.type = 'button'; 
    deleteB.setAttribute('onclick', 'deleteRow(this)'); 
 
 
    var editB = document.createElement('input'); 
    editB.value = 'remake'; 
    editB.type = 'button'; 
    editB.setAttribute('onclick', 'remakeRow(this);'); 
 
    td1.innerHTML = Surname +' '+name + ' '+name2; 
    td2.innerHTML = name3; 
    td3.innerHTML = name4; 
    td4.innerHTML = name5; 
    td5.innerHTML = name6; 
    td6.innerHTML = name7; 
    td7.innerHTML = name8; 
    td8.appendChild(deleteB); 
    td9.appendChild(editB); 
} 
 
 
function deleteRow(r) 
{ 
var a = confirm("Вы действительно хотите удалить эту строку?") 
    if(a == true) 
    { 
        var i=r.parentNode.parentNode.rowIndex; 
        d.getElementById('T3').deleteRow(i); 
    } 
 
} 
 
function remakeRow(t1) 
{ 
 
    var tabled = d.getElementById("T3"); 
    tabled.contentEditable = "true"; 
 
     
}

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <title></title> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link href="css/style.css" rel="stylesheet"> 
        <script src="script/script2.js"></script> 
    </head> 
    <body> 
    <form action="" method="post" onsubmit="AddRow(); return false;"> 
    <fieldset> 
        <label for='form_surname'>Surname: </label> 
        <input type='text' id='Surname' name='Surname'> 
 
        <label for='form_surname'>name: </label> 
        <input type='text' id='name' name='name'> 
 
        <label for='form_surname'>Patronymic: </label> 
        <input type='text' id='name2' name='name'> 
 
        <label for='form_surname'>Position: </label> 
        <input type='text' id='name3' name='name'> 
 
        <label for='form_surname'>Date of Birth: </label> 
        <input type='date' id='name4' name='name'> 
 
        <label for='form_surname'>Home Adress: </label> 
        <input type='text' id='name5' name='name'> 
 
        <label for='form_surname'>Phone Number: </label> 
        <input type='phone' id='name6' name='name'> 
 
        <label for='form_surname'>Email: </label> 
        <input type='email' id='name7' name='name'> 
 
        <label for='form_surname'>Salary: </label> 
        <input type='text' id='name8' name='name'> 
 
        <button class="submit" >Confirm</button> 
        <button class="btn" onclick="this.form.reset();">Clear</button> 
    </fieldset> 
    </form> 
        <br> 
        <table border="2" id="T3"> 
            <thead> 
            <th>Surname</th> 
            <th>Name</th> 
            <th>Patronymic</th> 
            <th>Position</th> 
            <th>Date of Birth</th> 
            <th>Home Adress</th> 
            <th>Phone Nubmer</th> 
            <th>E-mail</th> 
            <th>Salary</th> 
            </thead> 
            <tbody> 
                <!--<tr><td>Surname gdfdgfgdfgdg gdfgdgdfgdfg</td><td>Surname</td><td>Surname</td><td>Surname</td><td>Surname</td><td>Surname</td><td>Surname</td><td><button onclick="deleteRow(this)">delete</button></td><td><button onclick="remakeRow(this)">remake</button></td></tr> 
                <tr><td>Surname gdfdgfgdfgdg gdfgdgdfgdfg</td><td>Surname</td><td>Surname</td><td>Surname</td><td>Surname</td><td>Surname</td><td>Surname</td><td><button onclick="deleteRow(this)">delete</button></td><td><button onclick="remakeRow(this)">remake</button></td></tr> 
                <tr><td>Surname gdfdgfgdfgdg gdfgdgdfgdfg</td><td>Surname</td><td>Surname</td><td>Surname</td><td>Surname</td><td>Surname</td><td>Surname</td><td><button onclick="deleteRow(this)">delete</button></td><td><button onclick="remakeRow(this)">remake</button></td></tr> -->             
            </tbody> 
        </table> 
    </body> 
</html>

Answer 1

По клику на кнопку, получаем ближайший tr(строку таблицы) и делаем ему contentEditable = true :

function remakeRow(t1) { 
  var a = t1.closest('tr').contentEditable; 
  if (a == 'true') 
    t1.closest('tr').contentEditable = false; 
  else 
    t1.closest('tr').contentEditable = true; 
}

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

JQuery form styler, не отображается текст в элементе select

Всем привет, есть selecte созданный с помощью php кода, я его стилизовал с помощью Jquery form styler, проблема в том что не отображается текст элемента,...

224

HTML