Show row by row in a table

Asked

Viewed 98 times

0

Editing to put all the code that is on the same page.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="validationAdd_Update.js"></script> 

        <script>


            function updateBook(id)
            {    
                var isbn = document.getElementById("ISBN"+id).innerHTML;
                document.getElementById("ISBN").value = isbn;

                 var title = document.getElementById("Title"+id).innerHTML;
                document.getElementById("Title").value = title;

                 var authorsname = document.getElementById("Authorsname"+id).innerHTML;
                document.getElementById("Authorsname").value = authorsname;

                 var edition = document.getElementById("edition"+id).innerHTML;
                document.getElementById("edition").value = edition;

                 var year = document.getElementById("year"+id).innerHTML;
                document.getElementById("year").value = year;

                 var category = document.getElementById("category"+id).innerHTML;
                document.getElementById("category").value = category;

                 var publisher = document.getElementById("publisher"+id).innerHTML;
                document.getElementById("publisher").value = publisher;

                 var quantityinstock = document.getElementById("quantityinstock"+id).innerHTML;
                document.getElementById("quantityinstock").value = quantityinstock;

                 var price = document.getElementById("price"+id).innerHTML;
                document.getElementById("price").value = price;
            }

            $(document).ready(function(){
                $(".update").click(function(){
                    $("#UPDT").toggle();
                    $(this).text(function(i,text){
                        return text === "See less" ? "Update" : "See less";
                    });
                });
            });
        </script>
        <script>
        var $UPDT  = $('#UPDT'),
        $tableupdate = $('#tableupdate');
        $tableupdate.on('onclick', '.update', function(e) {
        e.preventDefault();
        $table.find('tr.temp-row').remove();
        $(this).closest('tr').after(function() {
            var $tr = $('<tr class="temp-row"><td colspan="9"></td></tr>');
            return $tr.find('td').html($UPDT).end();


        </script>



    </head>
        <body>
            <ul>
            <li><a href="index.html">Home </a> </li>
            <li><a href="adminpage.html">Add a new book </a> </li>
            <li><a href="update.php">Update/Delete books</a> </li>
            <li><a href="showOrders.php">Show Orders</a> </li>
            <li><a href="addEmployee.html">Register a new Employee</a> </li> </ul> 
            <br>
    <?php
        include('config.php');
        $query = "SELECT * FROM books ORDER BY Title ASC";
        $r=mysqli_query($conn, $query);
    ?>
        <table class="updatetable" cellpadding="2" cellspacing="2" border="0">
            <tr>
        <th>Image</th>
        <th>ISBN</th>
        <th> Title </th>
        <th> Author's name</th>
        <th> edition</th>
        <th> year</th>
        <th> category</th>
        <th> publisher</th>
        <th> quantity-in-stock</th>
        <th> price</th>

        </tr>
    <?php $id = 0;?>
    <?php while($books =mysqli_fetch_object($r)){?>
        <?php $id = $id +1;?>
        <tr>
        <td><?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $books->Image ).'"height="100" width="100"/>'; ?> </td> 
        <td id="ISBN<?php echo $id ?>"><?php echo $books->ISBN; ?></td>
        <td id="Title<?php echo $id?>"><?php echo $books->Title;  ?></td>
        <td id="Authorsname<?php echo $id?>"><?php echo $books->Authorsname; ?></td>
        <td id="edition<?php echo $id?>"><?php echo $books->edition;?></td>
        <td id="year<?php echo $id?>"><?php echo $books->year;   ?></td>
        <td id="category<?php echo $id?>"><?php echo $books->category;   ?></td>
        <td  id="publisher<?php echo $id?>"><?php echo $books->publisher;  ?></td>
        <td id="quantityinstock<?php echo $id?>"> <?php echo $books->quantityinstock; ?></td>
        <td id="price<?php echo $id?>"><?php echo $books->price; ?></td> 
        <td> <button class="update" onclick="updateBook(<?php echo $id?>)">Update</button></td> 
            <td><td><a href="delete_rows.php?del=<?php echo $books->ISBN; ?>">delete</a></td>
      </tr>
        <?php } ?>
            </table>
            <form id="UPDT" name="ContactForm" action="update_books.php" method="POST" onsubmit="return ValidateContactForm();" >
                ISBN:<input type="text" name="ISBN" id ="ISBN" >
                Title:<input type="text" name="Title"  id="Title">
                Author's name<input type="text" name="Authorsname" id="Authorsname">
                Edition<input type="text" name="edition" id="edition" onkeypress="return justNumber(event)">
                Year:<input type="text" name="year" id="year" onkeypress="return justNumber(event)"> 
                Category: <input type="text" name="category" id ="category">
                Publisher:<input type="text" name="publisher" id="publisher" >
                Quantity-in-stock:<input type="text" name="quantityinstock" id ="quantityinstock" onkeypress="return justNumber(event)">
                Price:<input type="text" name="price" id="price" onkeypress="return justNumber(event)">
                <input type="file" name="fileToUpload" id="fileToUpload"> 
                <input type="submit" value="Upload Image" name="submit"> <br>
                <input type="submit" value="Send" name="send">
            </form>

        </body>
    </html>
php html

1 answer

0


Here’s a functional example. Just adapt your PHP.

$( document ).ready(function() {
    var $form = $('.form');
    var $table = $('.updatetable');

    $table.on('click', 'button', function() {
      var row = $(this).closest("tr");
      var button = $(this);
      if (button.html() === "See Less") {
        $table.find('tr.temp-row').remove();
        $table.find("button").html("Update");
      } else {
        row.after(function() {
          var $tr = $('<tr class="temp-row"><td colspan="11"></td></tr>');
          $table.find("button").html("Update");
          button.html("See Less");
          return $tr.find('td').html($form).end();
        });
      }
    });
});
.none {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="updatetable" cellpadding="2" cellspacing="2" border="0">
  <tr>
    <th>Image</th>
    <th>ISBN</th>
    <th> Title </th>
    <th> Author's name</th>
    <th> edition</th>
    <th> year</th>
    <th> category</th>
    <th> publisher</th>
    <th> quantity-in-stock</th>
    <th> price</th>

  </tr>
  <tr>
    <td>Image</td>
    <td>ISBN</td>
    <td> Title </td>
    <td> Author's name</td>
    <td> edition</td>
    <td> year</td>
    <td> category</td>
    <td> publisher</td>
    <td> quantity-in-stock</td>
    <td> price</td>
    <td>
      <button class="update">Update</button>
    </td>
    <td>
      <td><a href="#">delete</a></td>

  </tr>
  <tr>
    <td>Image</td>
    <td>ISBN</td>
    <td> Title </td>
    <td> Author's name</td>
    <td> edition</td>
    <td> year</td>
    <td> category</td>
    <td> publisher</td>
    <td> quantity-in-stock</td>
    <td> price</td>
    <td>
      <button class="update">Update</button>
    </td>
    <td>
      <td><a href="#">delete</a></td>

  </tr>
</table>


<div class="none">
            <form class="form" name="ContactForm" action="update_books.php" method="POST" onsubmit="return ValidateContactForm();">
                ISBN:
                <input type="text" name="ISBN" id="ISBN"> Title:
                <input type="text" name="Title" id="Title"> Author's name
                <input type="text" name="Authorsname" id="Authorsname"> Edition
                <input type="text" name="edition" id="edition" onkeypress="return justNumber(event)"> Year:
                <input type="text" name="year" id="year" onkeypress="return justNumber(event)"> Category:
                <input type="text" name="category" id="category"> Publisher:
                <input type="text" name="publisher" id="publisher"> Quantity-in-stock:
                <input type="text" name="quantityinstock" id="quantityinstock" onkeypress="return justNumber(event)"> Price:
                <input type="text" name="price" id="price" onkeypress="return justNumber(event)">
                <input type="file" name="fileToUpload" id="fileToUpload">
                <input type="submit" value="Upload Image" name="submit">
                <br>
                <input type="submit" value="Send" name="send">
            </form>
        </div>

  • I seem very interesting your answer, I tried to adapt(pf see my post,I will edit) and however it is not working, have you help me? thank you

  • still not giving :(

  • I’ve already put.

  • if you see my edition I had already done all adaptation and it didn’t work, I thought that’s what we had always talked about from the beginning, I saw your suggestion adapted and it didn’t work

  • I’ll try and see if I can

  • I tried and I couldn’t, then I tried to copy your code and I couldn’t!

  • I think I got it, in your codeVoce has more than one "update" button I just have. my table will fetch all the information that is in the database and for each element that calls from the database creates a row and each row has a button "update"

  • I modified the code so he could get the dynamically created buttons. Now he identifies the button on the table and finds the <tr> closest (which is the one he inserts)

  • we can talk in chat sff?

  • Okay can you invite me? I’m just not getting it

  • Let’s go continue this discussion in chat.

  • I put the code inside $( Document ).ready to make sure it runs only after the dynamically created table. Take a look at the chat

Show 7 more comments

Browser other questions tagged php html

You are not signed in. Login or sign up in order to post.