添加,删除,更新HTML表单中的XML数据

时间:2014-02-06 20:41:54

标签: javascript html xml forms

我遇到了一个问题,我不知道如何解决。我能用数据库和php做到这一点,但我似乎无法用Javascript(必需),html和xml来做。我有一个名为racelane.xml

的xml文档
<?xml version="1.0"?>
<RACELANE>
    <CAR>
         <CARNUMBER>1</CARNUMBER>
         <DRIVER>Erick Buque</DRIVER>
         <CARMAKE>Nissan</CARMAKE>
         <CARMODEL>350Z</CARMODEL>
         <YEAR>2011</YEAR>
    </CAR>
    <CAR>
        <CARNUMBER>2</CARNUMBER>
        <DRIVER>Sean Smith</DRIVER>
        <CARMAKE>Chevy</CARMAKE>
        <CARMODEL>Cobalt SS</CARMODEL>
        <YEAR>2010</YEAR>
    </CAR>
    <CAR>
        <CARNUMBER>3</CARNUMBER>
        <DRIVER>James Abbot</DRIVER>
        <CARMAKE>Honda</CARMAKE>
        <CARMODEL>Civic si</CARMODEL>
        <YEAR>2011</YEAR>
    </CAR>
    <CAR>
        <CARNUMBER>4</CARNUMBER>
        <DRIVER>Leigh Summers</DRIVER>
        <CARMAKE>Nissan</CARMAKE>
        <CARMODEL>Altima R</CARMODEL>
            <YEAR>2006</YEAR>
    </CAR>
    <CAR>
        <CARNUMBER>5</CARNUMBER>
        <DRIVER>Rick Littleton</DRIVER>
        <CARMAKE>Ford</CARMAKE>
        <CARMODEL>Mustang</CARMODEL>
        <YEAR>2013</YEAR>
    </CAR>
</RACELANE>

我的html文档test7pub.html已经准备好了。 javascript代码读取xml文件并将所有内容放入一个文本框中,我包含一个更新和删除按钮,另一个空白行带有一个添加按钮,但我似乎无法弄清楚如何将三个按钮的代码关于xml(我已定期完成)。然后追加/更新文件。如果我可以排序,并警告或拒绝重复的车号,我会有奖励。下面是我的HTML。

<html>
<body>

<script>
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","racelane.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
document.write("<tr><th>CarNumber</th><th>Driver</th><th>Make</th><th>Model</th><th>Year</th></tr>");
var x=xmlDoc.getElementsByTagName("CAR");
for (i=0;i<x.length;i++)
  { 
  document.write("<form action='test7pub.html' method='post'>");
  document.write("<tr>");         

  document.write("<td>");
  document.write("<input type='text' size='5' required name='carnumber' value=");
  document.write(x[i].getElementsByTagName("CARNUMBER")[0].childNodes[0].nodeValue);
  document.write(" </td>");

  document.write("<td>");
  document.write("<input type='text' name='driver' value=");
  document.write(x[i].getElementsByTagName("DRIVER")[0].childNodes[0].nodeValue);
  document.write(" </td>");

  document.write("<td>");
  document.write("<input type='text' name='make' value=");
  document.write(x[i].getElementsByTagName("CARMAKE")[0].childNodes[0].nodeValue);
  document.write(" </td>");

  document.write("<td>");
  document.write("<input type='text' name='model' value=");
  document.write(x[i].getElementsByTagName("CARMODEL")[0].childNodes[0].nodeValue);
  document.write(" </td>");

  document.write("<td>");
  document.write("<input type='text' name='year' value=");
  document.write(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
  document.write(" </td>");

  document.write("<td>");
  document.write("<input type=submit name=update value=update");
  document.write(" </td>");
  document.write("<td>");
  document.write("<input type=submit name=delete value=delete");
  document.write(" </td>");

  document.write("</tr>");
  document.write("</form>");  
  }
document.write("<form action='test7pub.html' method='post'>");
document.write("<tr>");       

document.write("<td>");
document.write("<input type='text' size='5' required=true name='ucarnumber' >");
document.write(" </td>");

document.write("<td>");
document.write("<input type='text' required name='udriver' >");
document.write(" </td>");

document.write("<td>");
document.write("<input type='text' required name='ucarmake' >");
document.write(" </td>");

document.write("<td>");
document.write("<input type='text' required name='ucarmodel' >");
document.write(" </td>");

document.write("<td>");
document.write("<input type='text' required name='uyear' >");
document.write(" </td>");

document.write("<td>");
document.write("<input type=submit name=add value=add>");
document.write(" </td>");

document.write("</tr>");
document.write("</form>");   
document.write("</table>");

</script>

</body>
</html>

我从w3学校获得了灵感和语法,我只是建立在我需要的基础上。我试图避免使用数据库并使用XML。提前致谢。

0 个答案:

没有答案