How use loop in jquery

Question

0.00/5 (No votes)

See more:

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 20-Aug-21 7:38am

Abolfazl 2021

Updated 20-Aug-21 9:37am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Afzaal Ahmad Zeeshan · Answer 1 · 2021-08-20T09:37:00

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[^].