Question 45606 in CSS Question posted in
Some basic documentation can be found here.

How to make an edit button which can edit the dynamic value written in table – CSS

I want to make an function which can edit my dynamic table values.
I saw other questions but they using for and other tags but i am new in js so help me out.

I tried to make some function but no use. Give me example using replace tag.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    var editIt = document.createElement("button");
editIt.innerText = "Edit";
edit.appendChild(editIt);
editIt.addEventListener("click", function() {
    editIt.remove();
  
    var editFName = document.createElement("input");
    editFName.value = fName.value;
    editFName.classList.add("col-md-12");
    fNameData.innerText = "";
    fNameData.appendChild(editFName);
  
    var editLName = document.createElement("input");
    editLName.value = lName.value;
    editLName.classList.add("col-md-12");
    lNameData.innerText = "";
    lNameData.appendChild(editLName);

    var editAddress = document.createElement("input");
    editAddress.value = Address.value;
    editAddress.classList.add("col-md-12");
    AddressData.innerText = "";
    AddressData.appendChild(editAddress);

    var editPasscode= document.createElement("input");
    editPasscode.value = passcode.value;
    editPasscode.classList.add("col-md-12");
    passcodeData.innerText = "";
    passcodeData.appendChild(editPasscode);
        
    var saveIt = document.createElement("button");
    saveIt.innerText = "Save";
    edit.appendChild(saveIt);
    saveIt.addEventListener("click", function() {
        fNameData.innerText = editFName.value;
        lNameData.innerText = editLName.value;
        AddressData.innerText = editAddress.value;
        passcodeData.innerText = editPasscode.value;
        fName.value = editFName.value
        lName.value = editLName.value
        Address.value = editAddress.value
        passcode.value = editPasscode.value
        saveIt.remove();
        edit.appendChild(editIt);
  });
});```

  2. 0

    I give you an example for your reference:

    function genTable() {
  let table = document.createElement("Table");
  let row = table.insertRow();
  let cell = row.insertCell();
  cell.innerHTML = "a";
  cell = row.insertCell();
  cell.innerHTML = "<button onclick='edit(this)'>Edit</button>";
  document.body.appendChild(table);
}

function edit(element) {
  let thisRow = element.parentNode.parentNode;
  for (let i = 0; i < thisRow.cells.length-1; i++) {
    let cell = thisRow.cells[i];
    cell.contentEditable = true;
  }
}
    <button onclick="genTable()">
Generate a Table
</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search