All geek questions in one place

How to glide over a row table using jQuery?

I was wondering how I can shift the table row from my script.

I have a php file that is included in an html page inside a div called 'output-listings'.

PHP FILE:

<?php function outputListingsTable() { $mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead'); $result = $mysql->query("SELECT * FROM explore") or die($mysql->error); if($result) { echo "<div class=\"main-info\"> \n"; echo "<table class=\"listings\"> \n"; echo "<tbody> \n"; while($row = $result->fetch_object()) { $id = $row->id; $siteName = $row->site_name; $siteDescription = $row->site_description; $siteURL = $row->site_url; $sitePrice = $row->site_price; echo " <tr id=\"more-info-" .$id. "\" class=\"mi-" .$id. "\"> \n"; echo " <td> \n"; echo " <div id=\"more-" .$id. "\" class=\"more-information\"></div> \n"; echo " </td> \n"; echo " </tr> \n"; echo " <tr id=\"main-info-" .$id. "\"> \n"; echo " <td>" . $siteName . "</td> \n"; echo " <td>" . $siteURL . "</td> \n"; echo " <td><a id=\"link-" . $id . "\" class=\"more-info-link\" href=\"#\">More info</a></td> \n"; echo " </tr> \n"; } echo "</tbody> \n"; echo "</table> \n"; echo "</div> \n"; } } ?>

As you can see, the script above creates a dynamic id and the classes that confuse me are how to select them using jQuery.

Here is the jquery that I have so far, but it doesn't work sadly.

 $(function() { $("a.more-info-link").click(function() { $("#more-info-" + this.id).load("getinfo.php").slideToggle("slow"); return false; }); });

Any help would be great.

0
source share
2 answers

Instead of targeting the line, paste the content into the div inside the line and apply the animation to the div.

 <html> <head> <title>SandBox</title> </head> <body> <table> <tr> <td> <div id="divMoreInfo"> some text or whatever goes here. </div> </td> </tr> <tr id="main-info-"> <td> <a id="link" href="#">More info</a> </td> </tr> </table> </body> </html> <script src="js/jquery.js" type="text/jscript" ></script> <script type="text/javascript"> $("#link").click(function() { $("#divMoreInfo").slideToggle(200); }); </script>
+2
source 
 $("a.more-info-link").click(function() { var id = $(this).attr("id").substring(4); // This extract the id from the link id field $(#more-info-" + id).load("getinfo.php", function() { $(this).slideToggle("slow"); }); // I suppose you want to toggle after the content was loaded? or you can keep your statement });

See if it works?

0
source

Source: https://habr.com/ru/post/1312305/

More articles:


All Articles