我是Javascript的新手,也是stackoverflow的新手,所以如果有任何错误请尝试忽略。
我有一个XML文件并已应用XSL转换。
我正在尝试从.xslt
格式的表单更改XML标记的内容,并使用XSLT显示更改的内容。下面是我的XML和XSLT代码。
所以这是我的XML文件。我想要做的是改变名称,电子邮件和资格的价值。我使用XSLT并以表格格式显示XML,因此我应该在更改XML内容时更改行内容。
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="work.xsl"?>
<student>
<studentlist>
<S.No>1</S.No>
<Name>Student1</Name>
<E-mail>ab@xy.in</E-mail>
<Qualification>MCA</Qualification>
<createdon>6 Jan 2012</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
<studentlist>
<S.No>2</S.No>
<Name>Student2</Name>
<E-mail>cd@xy.in</E-mail>
<Qualification>BE</Qualification>
<createdon>7 Jan 2012</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
<studentlist>
<S.No>3</S.No>
<Name>Student3</Name>
<E-mail>ef@xy.in</E-mail>
<Qualification>B.TECH</Qualification>
<createdon>3 Jan 2012</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
<studentlist>
<S.No>4</S.No>
<Name>Student4</Name>
<E-mail>gh@xy.in</E-mail>
<Qualification>MCA</Qualification>
<createdon>23 Dec 2011</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
</student>
这是我的XSLT文件:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Login form</title>
<style>
input{
font: 1em sans-serif;
width: 300px;
box-sizing: border-box;
border: 1px solid #999;
}
.styled-select select {
}
.sel {
font: 1em sans-serif;
width: 230px;
height:31px;
box-sizing: border-box;
border: 2px solid #43C6DB;
height:31px;
background: #fafafa url("/home/walkingtree/Desktop/hemanth practice/editalll/hello.jpg") no-repeat 100% 50%;
index:-1;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
}
#form-setting{
position:fixed;
left:35%;
top:30%;
width: 390px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 15px 1px;
background-color:#BDEDFF;
}
form div + div {
margin-top: 1em;
}
label {
display: inline-block;
width: 110px;
text-align: left;
}
input{
font: 1em sans-serif;
width: 230px;
height:31px;
box-sizing: border-box;
border: 2px solid #43C6DB;
}
.button {
background-color: #89C35C;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:6px;
}
option{
height:20px;
}
.button2 {border-radius:6px;
background-color: #E55451;
float:right}
#close{position:fixed;
top:29%;
left:66%;
cursor:pointer;
}
#form-div{
display:none;
background-color:rgba(0,0,0,0.7);
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#edit-div{
display:none;
background-color:rgba(0,0,0,0.7);
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#edit-setting{
position:fixed;
left:35%;
top:30%;
width: 390px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 15px 1px;
background-color:#BDEDFF;
}
</style>
</head>
<body>
<div>
<table border="0" cellspacing="0" width="600px">
<tr>
<th>
<div style="background-color:#EF8224">
<table width="100%">
<tr>
<th style="float:left"><font color="white">StudentList</font></th>
<th style="float:right"><a href="#" onclick="poped()" style="text-decoration:none"><font color="Black">Add</font></a></th>
<th style="float:right"><img src="/home/walkingtree/Desktop/adding.png" width="17px" align="right"/></th>
</tr>
</table>
</div>
</th>
</tr>
<tr>
<td>
<table width="100%" id="myTable" class="myTab">
<tr bgcolor="#EF8224">
<th style="text-align:left" width="100px">S.No.</th>
<th style="text-align:left">Name</th>
<th style="text-align:left">Email</th>
<th style="text-align:left">Qualification</th>
<th style="text-align:left">CreatedOn</th>
<th style="text-align:left">Action</th>
</tr>
<xsl:for-each select="student/studentlist">
<tr style="background-color:#FFDFD6">
<td><xsl:value-of select="S.No"/></td>
<td><xsl:value-of select="Name"/></td>
<td><xsl:value-of select="E-mail"/></td>
<td><xsl:value-of select="Qualification"/></td>
<td><xsl:value-of select="createdon"/></td>
<td><xsl:for-each select="Image/img"><img width="25px" height="25px" src="{@src}" class="CalloutRightPhoto">
<xsl:attribute name="onclick">
<xsl:choose>
<xsl:when test="contains(@src, 'edit.jpg')">
<xsl:text>edit(this);</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text>deleteRow(this); </xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</img>
</xsl:for-each>
</td>
</tr>
</xsl:for-each>
</table>
</td>
</tr>
</table>
</div><div id="form-div">
<div id="form-setting">
<p>
<img id="close" src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg" width="10px" height="10px" onclick="closeform()"/>
</p>
<p id="pname">
</p>
<form>
<table>
<tr>
<td>
<div>
<label for="name" >Name<font color="red">*</font>:</label>
<input type="text" id="name" name="user_name"/>
</div>
<div>
<label for="mail" >E-mail<font color="red">*</font>:</label>
<input type="email" id="mail" name="user_mail"/>
</div>
<div>
<label for="qual">Qualification:</label>
<select class="sel" id="selet">
<option value=""></option>
<option value="MCA">MCA</option>
<option value="B.Tech">B.Tech</option>
</select>
</div>
</td>
</tr>
<tr style="width:100%">
<td align="right" style="float:right">
<button type="button" class="button" onclick="sub()">submit</button>
<button class="button button2">reset</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<div id="edit-div">
<div id="edit-setting">
<p>
<img id="close" src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg" width="10px" height="10px" onclick="formclose()"/>
</p>
<p id="pname">
</p>
<form>
<table>
<tr>
<td>
<div>
<label for="name" >Name<font color="red">*</font>:</label>
<input type="text" id="ename" name="user_name"/>
</div>
<div>
<label for="mail" >E-mail<font color="red">*</font>:</label>
<input type="email" id="email" name="user_mail"/>
</div>
<div>
<label for="qual">Qualification:</label>
<select class="sel" id="sele">
<option value=""></option>
<option value="MCA">MCA</option>
<option value="B.Tech">B.Tech</option>
</select>
</div>
</td>
</tr>
<tr style="width:100%">
<td align="right" style="float:right">
<button type="button" class="button" onclick="editme()">edit</button>
<button class="button button2">reset</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript">
var v=document.getElementById("form-div");
function poped(){
v.style.display="block";
}
function closeform(){
v.style.display="none";
}
function sub(){
var i;
var name=document.getElementById("name").value;
var mail=document.getElementById("mail").value;
var qual=document.getElementById("selet").value;
var table=document.getElementById("myTable");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
var cell5=row.insertCell(4);
var cell6=row.insertCell(5);
cell1.innerHTML="";
cell2.innerHTML=name;
cell3.innerHTML=mail;
cell4.innerHTML=qual;
cell5.innerHTML="";
cell6.innerHTML="";
row.style.backgroundColor="#FFDFD6";
row.style.height="30px";
}
function deleteRow(r){
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}
var p=document.getElementById("edit-div");
function edit(e){
p.style.display="block";
}
function formclose(){
p.style.display="none";
}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
<![CDATA[if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}]]>
};
xhttp.open("GET", "workxml.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName('Name')[0];
var y = x.childNodes[0];
document.getElementById("ename").innerHTML =
y.nodeValue;
}
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>