I am not sure what is wrong w/ this code. The main issue is that the table that is in the initial html will empty its td but the table that I load using php and jquery through a mysql database will not empty the td elements. There is a table underneath the button in the initial html. if you click on a box in the table, it will empty. the same does not happen for the table that is generated by the xml, php and mysql database. Please advise - my goal is to use a change html function in order to change an add button to a remove button and vice versa. If I cannot empty a table element, I won't be able to change the element. Thank you in advance everybody.
-------------------------------------------------------------------
Here is the html
Code:
<html> <head> <title>The HTML</title> <script type="text/javascript" src="jquery-1.3.1.min.js"></script> <script type="text/javascript" src="thejs.js"></script> </head> <body> <div id="container"></div> <input type="submit" id="getData" name="getData" value="Get Data!" /> <table border="2"><tr><td>jkljkl</td><td>jkljl</td></tr></table> </body> </html>
Code:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <people> <person> <firstname title="Mr">Steve</firstname> <surname>Reynolds</surname> </person> <person> <firstname title="Mr">David</firstname> <surname>Grohl</surname> </person> </people>
Code:
<?php
include('dbc.php');
include('functions.php');
/*
Assumes you have connected to your database and that you have a table
called "people" with 3 columns - title, firstname, surname
*/
$query = "SELECT university,division,state FROM teamreports";
$result = mysql_query($query);
// create a new XML document
$doc = new DomDocument('1.0');
// create root node
$root = $doc->createElement('teamreports');
$root = $doc->appendChild($root);
while($array = mysql_fetch_array($result)) {
// add node for each row
$occ = $doc->createElement('team');
$occ = $root->appendChild($occ);
$child = $doc->createElement('university');
$child = $occ->appendChild($child);
$value = $doc->createTextNode($array['university']);
$value = $child->appendChild($value);
$child = $doc->createElement('state');
$child = $occ->appendChild($child);
$value = $doc->createTextNode($array['state']);
$value = $child->appendChild($value);
$child = $doc->createElement('division');
$child = $occ->appendChild($child);
$value = $doc->createTextNode($array['division']);
$value = $child->appendChild($value);
}
// get completed xml document
$xml_string = $doc->saveXML();
header('Content-Type: application/xml; charset=ISO-8859-1');
echo $xml_string;
?>
Here is the javascript code
Code:
$(document).ready(function() {
$("#getData").click(function(){
var data = "<table id='tbl' border='2'><tbody>";
/* change the $.get to "thephp.php" when that is setup */
$.get("thePHP.php", function(theXML){
$('team',theXML).each(function(i){
var division = $(this).find("division").text();
var university = $(this).find("university").text();
var state = $(this).find("state").text();
data = data + "<tr><td>" + division + "</td><td>" + university + "</td><td> " + state + "</td><td class='addtolist'>Add To List</td></tr>";
});
data = data + "</tbody></table>";
$("#container").html(data);
});
});
$("td").click(function() {
$(this).empty();
});
});
Comment