Question

我想在单击编辑按钮后使列表的行可编辑。我为要更改的每一行都设置了editablecontent = true，并通过onclick事件添加了焦点，但这仅适用于第一项。您能否提出其他方法使每行的内容可编辑？我最近开始学习javascript，所以香草javascript会更好。谢谢！


Storedcontact = []

// Represent a contact
function convertToEntry(name, surname, phone, email) {
    var obj = {
        name: name, 
        surname: surname, 
        phone: phone, 
        email: email
    };
    return obj;
}

// add contacts
var form = document.getElementById("btn-submit");

form.addEventListener("click", function(ev) {
    ev.preventDefault();

    var name = document.getElementById("name").value;
    var surname = document.getElementById("surname").value;
    var number = document.getElementById("phone").value;
    var mail = document.getElementById("email").value;


    var duplicateFlag = false;
    var entry = convertToEntry(name, surname, number, mail);

    for (var i = 0; i < Storedcontact.length; i++) {
        let entry = Storedcontact[i]; 

        // this is duplicate
        if (entry.name === name) {
            alert("Duplicate") ;
            duplicateFlag = true;
        } else {
            duplicateFlag = false;
        }
    }

    // store and update ui onlz if name is not duplicate
    if (duplicateFlag === false) {

        Storedcontact.push(entry);
        updateUI();
    }

});


// showing contacts 
function updateUI() {
    var tbody = document.getElementById('entry-table');
    // clearing the table
    tbody.innerHTML = '';
    var newHtml = '';

    // looping the stored contacts
    for (var i = 0; i < Storedcontact.length; i++) {
        var entry = Storedcontact[i];
        // printing loop results
        //console.log(JSON.stringify(entry));


        // creating rows with entry 
        var row = document.createElement("tr");

        row.innerHTML = `
        <td contenteditable="true" id="editable">${entry.name}</td>
        <td contenteditable="true" id="editable">${entry.surname}</td>
        <td contenteditable="true" id="editable">${entry.phone}</td>
        <td contenteditable="true" id="editable">${entry.email}</td>
        <td><button class="btn btn-danger btn-sm delete" onClick="document.getElementById('entry-table').deleteRow(${i});">Delete</button></td>
        <td><button class="btn btn-danger btn-sm edit" onClick="editHtmlTableRow();">Edit</button></td>
        `;

        tbody.appendChild(row);






  function clearFields() {
    document.getElementById("name").value = "";
    document.getElementById("surname").value = "";
    document.getElementById("phone").value = "";
    document.getElementById("email").value = "";
  }

  clearFields();

    }
}
function checkDuplicate (name) {
    for (var i = 0; i < Storedcontact.length; i++) {
        var entry = Storedcontact[i]; 
        if (entry.name === name) {
            alert("Duplicate") 

        } else {

        }
    }
}

function editHtmlTableRow (){

document.getElementById("editable").focus();



};


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min (3).css">
<title>MyAddressBook</title>
    </head>
<body>
    <div class="container mt-4">
        <h1 class="display-4 text-center">
            My<span class="text-primary">Address</span>Book</h1>
        <form id="address-form">
            <div class="form-group"></div>
            <label for="Name">Name</label>
            <input type="text" id="name" class="form-control">
            <div class="form-group"></div>
            <label for="Surname">Surname</label>
            <input type="text" id="surname" class="form-control">
            <div class="form-group"></div>
            <label for="Number">Number</label>
            <input type="text" id="phone" class="form-control">
            <div class="form-group"></div>
            <label for="mail">E-mail</label>
            <input type="text" id="email" class="form-control">
    </div>
    <br>
    </br>
    <input type="submit" value="Add contact" id="btn-submit" class="btn btn-primary btn-block container mt-4">
    </form>
    <table class="table table-striped">
        <thread>
            <tr>
                <th>Name</th>
                <th>Surname</th>
                <th>Number</th>
                <th>E-mail</th>
                <th></th>
            </tr>
        </thread>
        <tbody id="entry-table"></tbody>
    </table>
</div>
    <script src="app.js"></script>
</body>
</html>

Answer 1

为行分配一个唯一的标识符，例如for循环计数器

for (var i = 0; i < Storedcontact.length; i++) {
    var entry = Storedcontact[i];
    // printing loop results
    //console.log(JSON.stringify(entry));


    // creating rows with entry 
    var row = document.createElement("tr");

    row.innerHTML = `
    <td contenteditable="true" id="editable"+i>${entry.name}</td>
    <td contenteditable="true" id="editable"+i>${entry.surname}</td>
    <td contenteditable="true" id="editable"+i>${entry.phone}</td>
    <td contenteditable="true" id="editable"+i>${entry.email}</td>
    <td><button class="btn btn-danger btn-sm delete" onClick="document.getElementById('entry-table').deleteRow(${i});">Delete</button></td>
    <td><button class="btn btn-danger btn-sm edit" onClick="editHtmlTableRow(${i});">Edit</button></td>
    `;

    tbody.appendChild(row);
}

以及您的功能

function editHtmlTableRow (i){

document.getElementById("editable"+i).focus();



}

使用Javascript单击可编辑的表行

1 个答案: