Click here to Skip to main content
15,065,914 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I had a problem in my code
I need to change only one line of the table by clicking the edit button, but that's the problem

Each time you click the edit button, the row and column of the table are selected and the information of all rows is edited

If I just need to edit the information in a row


What I have tried:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="new.css">
  <script src="new.js"></script>


</head>

<body>
<div class="main-block">

  <form id="form">
    <h1>pesrsonal information</h1>
    <div class="info">
      <input class="fname" type="text" name="name" placeholder="Full name" id="name">
      <input type="text" name="name" placeholder="Email" id="email">
      <input type="text" name="name" placeholder="Phone number" id="phone">
      <input type="text" name="name" placeholder="Website" id="web">
    </div>
    <p>Message</p>
    <div>
      <textarea rows="4"></textarea>
    </div>
    <button type="button" id="save">Submit</button>
<!--    <button type="button" id="update">update</button>-->


  </form>
</div>

<!--end of form -->
<!--start table code-->

<div>
  <table id="table">
    <thead>
    <tr>
      <th> full name </th>
      <th > email </th>
      <th > phone number  </th>
      <th >  website </th>
      <th> delete  </th>
      <th> edite  </th>
    </tr>
    </thead>
    <tbody id="tbody"></tbody>
  </table>
</div>

<!--end of table code -->
<script src="jquery-3.6.0.min.js"></script>
<script>
<pre>$(document).ready(function(){
    $('#save').click(function(){
        if($("#name").val() != null && $("#email").val() != ''){
            $("tbody").append(
                "<tr>" +"<td>" +$('#name').val()+ "</td>"
                +"<td >" + $('#email').val()+"</td>"
                +"<td>" +$('#phone').val()+"</td>"
                +"<td>" +$('#web').val()+"</td>"
                + "<td>" + "<button type='button' id='dell'>"+"Remove"+"</button>"
                + "</td>" + "<td >" +
                "<button type='button' id='edit'>"+"edit"+"</button>" + "</td>"+"</tr>");};
        $(form).trigger("reset")
    })
    // end of append information of form to table

    // start od code for edite information data

    $(document).on('click','#dell',function(){
        $(this).parent().parent().remove();
    })
    $("#table").on('click','#edit',function() {
        $("form").append("<button type='button' id='update'>"+"update"+"</button>");
        var currentRow = $(this).closest("tr");
        var col1 = currentRow.find("td:eq(0)").text();
        var col2 = currentRow.find("td:eq(1)").text();
        var col3 = currentRow.find("td:eq(2)").text();
        var col4 = currentRow.find("td:eq(3)").text();
        $("#name").val(col1);
        $("#email").val(col2);
        $("#phone").val(col3);
        $("#web").val(col4);
        $("#save").css("display", "none");
        $("#update").css("display", "block");
        $(currentRow).each(function () {
            $(currentRow).addClass("updating");
        })

// codes of update button


    $("#form").on('click','#update',function(){
        // $("#save").removeClass("hide");
        // $("#update").addClaas("hide");
        var new_row=  "<tr>" +"<td>" +$('#name').val()+ "</td>"
            +"<td >" + $('#email').val()+"</td>"
            +"<td>" +$('#phone').val()+"</td>"
            +"<td>" +$('#web').val()+"</td>"
            + "<td>" + "<button type='button' id='dell'>"+"Remove"+"</button>"
            + "</td>" + "<td >" +
            "<button type='button' id='edit'>"+"edit"+"</button>" + "</td>"+"</tr>"
        $("#table").find(".updating").replaceWith(new_row);


        if(currentRow){
            $("table tbody").find(".updating").replaceWith(new_row);
            currentRow = null;
        }
        $("#update").css("display","none");
        $("#save").css("display","block");
    });

});


});
Posted
Updated 20-Aug-21 9:37am

1 solution

First things first, you cannot create multiple elements inside a single DOM with duplicate IDs. Your HTML will be invalid if multiple buttons contain the same ID (update, edit, etc.). That will break any JavaScript logic that you write.

Quote:
If I just need to edit the information in a row
Simplest option would be to pass the row number (maybe the ID of the current record, number of row, object information; if you are using a framework to render UI from a data set) to the function.

I would change the button creation code to something like this in HTML:
HTML
<button type="button" id="edit-row1" onclick="handleEdit('row1')">Edit</button>

Then in JavaScript, handle the situation like this:
// JavaScript
function handleEdit(row) {
   // row === row1
   // fetch the row and update it
}
This is one way to control the row and update it.


My suggestion? I would recommend that you invest some time in a UI generation framework. If React or Vue.js sounds too complex, you can invest in jQuery UI for time being and use their controls to perform these actions.

See this: DataTables example - jQuery UI[^].
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900