My Html code(I am populating a html table with an XML file), there is a dynamic select option which is populated on the basis of product name from Xml file. and if I choose any option from it it will show the table consisting that product. I have also added an edit button on every row. Now my question is how to edit the respective row on click of the edit button connected to each row? And also it should reflect on the xml file(using php or JavaScript).. Thank you
Here is my code. html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</br>
Select an option:
<select type="input" name="ProductName" id="ProductList" onchange="searchXML()">
<option></option>
<option>all</option>
</select>
</br>
<div id="results">
</div>
<script type="text/javascript">
var attribute="";
var sel;
var productoptions="";
var arrayout=[];
sel=document.getElementById('ProductList');
document.onpageshow=dropdown();
function dropdown()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
attribute=xmlDoc.getElementsByTagName("ProductName");
for (i=0;i<attribute.length;i++)
{
var opt=document.createElement('option');
productoptions=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
opt.innerHTML = productoptions;
opt.value=productoptions;
for (j=0;j<i;j++)
{
arrayout[j]=opt.value;
if(opt.value!=arrayout)
{
sel.appendChild(opt);
}
}
}
arrayout="";
}
var product=[];
var quantity=[];
var date=[];
var grossprice=[];
var profit=[];
var divText=[];
function searchXML()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("ProductName");
input = document.getElementById("ProductList").value;
size = input.length;
divText=""
if (input == "")
{
document.getElementById("results").innerHTML= "Please select a Product Name!";
return false;
}
if (input === "all")
{
var y=xmlDoc.getElementsByTagName("entry");
for (i=0;i<y.length;i++)
{
date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue;
product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue;
grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue;
profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue;
if (divText==="")
{
divText="<h2>The product details are:</h2><br /><table class=tablesorter >";
divText+="<thead><tr><th>Date</th><th>Product</th><th>Quantity</th><th>GrossPrice</th><th>Profit</th><th>Action</th></tr></thead><tbody>";
}
divText += "<tr><td>" + date + "</td><td>" + product + "</td><td>" + quantity + "</td><td>" + grossprice + "</td><td >" + profit + "</td><td>" + "<input type=button value=edit>" + "</td></tr>";
}
}
for (i=0;i<x.length;i++)
{
startString = x[i].childNodes[0].nodeValue;
if (startString.toLowerCase() == input.toLowerCase())
{
date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue;
product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue;
grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue;
profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue;
if (divText==="")
{
divText="<h2>The product details are:</h2><br /><table class=tablesorter >";
divText+="<thead><tr><th>Date</th><th>Product</th><th>Quantity</th><th>GrossPrice</th><th>Profit</th><th>Action</th></tr></thead><tbody>";
}
divText += "<tr><td>" + date + "</td><td>" + product + "</td><td>" + quantity + "</td><td>" + grossprice + "</td><td >" + profit + "</td><td>" + "<input type=button value=edit>" + "</td></tr>";
}
}
if (divText=="")
{
divText = "<h2>The product does not exist.</h2>";
}
else
{
divText+="</tbody></table>";
}
document.getElementById("results").innerHTML= divText;
}
</script>
</body>
</html>
my XML file.
<?xml version="1.0" encoding="UTF-8"?>
<item>
<entry>
<ProductName>milk</ProductName>
<Date>2/10/2007</Date>
<Quantity>20</Quantity>
<GrossPrice>100</GrossPrice>
<Profit>20</Profit>
</entry>
<entry>
<ProductName>sugar</ProductName>
<Date>2/09/2009</Date>
<Quantity>45</Quantity>
<GrossPrice>1000</GrossPrice>
<Profit>100</Profit>
</entry>
<entry>
<ProductName>sugar</ProductName>
<Date>2/09/2010</Date>
<Quantity>40</Quantity>
<GrossPrice>600</GrossPrice>
<Profit>50</Profit>
</entry>
</item>
No comments:
Post a Comment