如何使用Javascript更改现有XML标记并在XSL转换中显示它?

时间:2017-08-10 13:51:19

标签: javascript html xml xslt

我是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>

0 个答案:

没有答案