0

Требуется возможность редактировать строку, по нажатию кнопки в ячейке этой строки. В связи с этим 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>

3
  • td должны редактироваться, а не table 22 окт 2017 в 14:29
  • @AntonShchyrov если вы имеете ввиду, что надо обращаться к тегу <td> и задавать ему в функции свойство contentEditable, то данный вариант не даёт результата. Прошу пример, может я не так реализую эту идею. 22 окт 2017 в 15:06
  • Честно говоря, я никогда таким не занимался. На Вашем месте, я бы в нужную строку добавил инпуты 22 окт 2017 в 15:31

1 ответ 1

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.