update dynamic HTML table row

Question

update dynamic HTML table row

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Good day, I have a form with six text fields in which the user types information and by pressing the submit button these are dynamically added an HTML table, I only show them in the table, there is no income in the database, that's what I use afterwards and for the moment everything works fine, this is the code of the form and the table

<div class="form-group">
        <input type="text" id="inputText1" required>
        <input type="text" id="inputText2" required>
        <input type="text" id="inputText3" required>
        <input type="text" id="inputText4" required>
        <input type="text" id="inputText5" required>
        <input type="text" id="inputText6" required>
        </div>
        <button type="button" class="btn btn-default" id="submit">Submit</button>
        <button type="button" class="btn btn-default" id="actualizar">Actualizar</button>


    <br /><br />
    <div class="table-responsive">
        <table class="table table-striped table-bordered table-condensed" id="myTable" style="width:90%; margin:0 auto;">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Last Name</th>
                    <th>Username</th>
                    <th>Nivel</th>
                    <th>DUI</th>
                    <th>ISSS</th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

Update HTML table row data

But now comes the part of updating any row of the table -by request- a select button has been added to each row of the table which when pressed places the information of each column of the selected row in the text field corresponding with this code:

   $(document).ready(function () {

         $("#myTable").on('click', '#select', function (e) {
             e.preventDefault();
             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(); 
             var col5 = currentRow.find("td:eq(4)").text(); 
             var col6 = currentRow.find("td:eq(5)").text(); 

             $("#inputText1").val(col1);
             $("#inputText2").val(col2);
             $("#inputText3").val(col3);
             $("#inputText4").val(col4);
             $("#inputText5").val(col5);
             $("#inputText6").val(col6);

             $(this).closest('tr').remove();

        });
    });

and if you show me the information in the text fields, the problem is that I do not know how to update the information of exactly the selected row, at the moment what I do is:

Delete the selected row that the user wants to modify from the table and display the information of each cell in the corresponding text fields.

The user modifies any information from the text fields

and the user clicking on the modify button adds the information of each text field as a new row, the previous row has disappeared

but I would like it not to disappear from the table, I would like the text fields to be populated but that the row remains in the table and that at the time of updating the corresponding row is updated

how could I achieve it?

I remind you that these operations do not represent any connection to the database, thanks for the help.

the table the charge taking the values of the inputs and then making an append on the table and then clean the values of each input, as follows:

var dui = $("#inputText1").val();
                var lastname = $("#inputText2").val();
                var name = $("#inputText3").val();
                var country = $("#inputText4").val();
                var DUI = $("#inputText5").val();
                var ISSS = $("#inputText6").val();

 $('#myTable tbody').append('<tr><td for="dui">' + dui + '</td><td for="lastname">' + lastname + '</td><td for="name">' + name + '</td><td>' + country + '</td><td for="DUI">' + DUI + '</td><td for="ISSS">' + ISSS + '</td><td><a href="#" id="select">Modificar</a></td></tr>');
                        $("#inputText1").val('');
                        $("#inputText2").val('');
                        $("#inputText3").val('');
                        $("#inputText4").val('');
                        $("#inputText5").val('');
                        $("#inputText6").val('');
                        $('#inputText1').focus();

jquery html

asked by 21.03.2017 в 14:01

source

2 answers

Problem with INNER JOIN Problems with sqlsrv_errors in php

score 1 · Answer 1

Place an id to your table and an onclick to each button when it is entered dynamically, through an array, in order to establish which row you are obtaining the data, and where you should store them. To do this once you click on one of these buttons, you must store this in a hidden variable.

TABLA = IDTABLA
COL1 COL2 COL3 BOTON
 X1   X4   X7  onclick=1
 X2   X5   X8  onclick=2
 X3   X6   X9  onclick=3

<table id="IDTABLA">
    <tr>
        <th>COL1</th>
        <th>COL2</th>
        <th>COL3</th>
        <th>BOTON</th>
    </tr>
    <tr>
        <td>X1</td>
        <td>X4</td>
        <td>X7</td>
    </tr>
    <tr>
        <td>X2</td>
        <td>X5</td>
        <td>X8</td>
    </tr>
    <tr>
        <td>X3</td>
        <td>X6</td>
        <td>X9</td>
    </tr>
    <tr>
        <td><button onclick="modificando(1)">Actualizar</button></td>
        <td><button onclick="modificando(2)">Actualizar</button></td>
        <td><button onclick="modificando(3)">Actualizar</button></td>
    </tr>
</table>

And we will place a script that when clicking any update it will call this, passing it the number that we have defined when making the table. And this will happen to the hidden variable that we have said (input)

<script>
    function modificando(numero){
        $("#variableModificando").val(numero);
        //Crear el insertado a los respectivos inputs
    }
</script>

save in <input type="text" id="variableModificando" hidden="true" value="2">

That way you'll be captured

<input type="text" id="COL1" value="X2">
<input type="text" id="COL2" value="X5">
<input type="text" id="COL3" value="X8">

And the new values that we will update will be to

<input type="text" id="COL1" value="Y1">
<input type="text" id="COL2" value="Y2">
<input type="text" id="COL3" value="Y3">

To capture the data, when you press modify, go to the following script

tabla = document.getElementById("IDTABLA");
        fila = $("#variableModificando").val();
        for (var i = 0; i >= 3; i++) {
            tabla.rows[fila].cells[i].innerText = $("#COL"+i).val();
        }

Where the DOM of a column is updated by its identifier. And it should look like you expect

TABLA = IDTABLA
COL1 COL2 COL3 BOTON
X1   X4   X7  onclick=1
Y1   Y2   Y3  onclick=2
X3   X6   X9  onclick=3

I hope it helps you: D

score 0 · Answer 2

When you add a row to your table, put an id to your tr and a name to your button with the id too, this id can be the id of your data, this simplifies the selection with JQuery.

I do not know how to add the data to the table, it might be useful to also tell us that. But if your row is this way, the only thing you have to do is the following:

$ (document) .ready (function () {

     $("#myTable").on('click', '#select', function (e) {
         e.preventDefault();
         var idbutton=$(this).name;
         var currentRow = $("td#"+idbutton);

         $("#inputText1").val(currentRow.find("td:eq(0)").text() );
         $("#inputText2").val(currentRow.find("td:eq(1)").text() );
         $("#inputText3").val(currentRow.find("td:eq(2)").text() );
         $("#inputText4").val(currentRow.find("td:eq(3)").text() );
         $("#inputText5").val(currentRow.find("td:eq(4)").text() );
         $("#inputText6").val(currentRow.find("td:eq(5)").text() );
    });
});