如何使用JQuery按属性删除元素

时间:2017-03-18 18:08:18

标签: javascript jquery html xml xslt

我希望我不会因为复制问题而浪费任何人的时间。我很难将我的问题与现有答案联系起来。

我正在处理一个包含与电影有关的信息的xml文件。

我正在尝试使用xslt生成一个带有按钮的html文件,该按钮将消除按下表格中的元组。这是一个构建块,一旦我理解了这个问题,我将用它构建一个更复杂的网站。

<?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>
<script src="jquery-3.1.1.min.js"></script>

<script>
    $(document).ready(function() {
        $("button".click(function() {
            $("ryear[!='1997']").hide();
        });
</script>
<button>Click me to eliminate non-1997 films</button>

</head> 
<body>
<h2>A Table of Remade Movies</h2>
<table border="1">
        <tr>
            <th>Title</th>
            <th>Year</th>
            <th>Original Title</th>
            <th>Original Year</th>
            <th>Fraction</th>
        </tr>
        <xsl:for-each select="remakes/remake">
        <tr>
            <td><rtitle><xsl:value-of select="rtitle"/></rtitle></td>
            <td><ryear><xsl:value-of select="ryear"/></ryear></td>
            <td><stitle><xsl:value-of select="stitle"/></stitle></td>
            <td><syear><xsl:value-of select="syear"/></syear></td>
            <td><fraction><xsl:value-of select="fraction"/></fraction></td>
        </tr>
        </xsl:for-each>
    </table>
</body>
</html>

</xsl:template>
</xsl:stylesheet>

有人能指出我纠正这段代码的方向吗?这个解决方案将让我继续解决其余的问题!

感谢。

3 个答案:

答案 0 :(得分:2)

在与原始海报进行对话后,我们想出了一种获得相同功能的更好方法:

&#13;
&#13;
function loadData(rocol) {
	var data = [];
	$(rocol).find('remake').each(function(){
	   data.push([
		  $(this).find("rtitle").text(),
		  $(this).find("ryear").text(),
		  $(this).find("fraction").text(),
		  $(this).find("stitle").text(),
		  $(this).find("syear").text()
	   ])
   });
   return data; 
}

$.get("http://neil.computer/stack/movie.xml", function (data) {
	$('#example').dataTable( {
		data : loadData(data)
	} );
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" /><script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="example">
	<thead>
		<tr>
			<th>Movie Title</th>
			<th>rYear</th>
			<th>Fraction</th>
			<th>sTitle</th>
			<th>sYear</th>
		</tr>
	</thead>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

此代码适合您。

<?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>
<script src="jquery-3.1.1.min.js"></script>
<script>
     $(document).ready(function () {
            $("button").click(function () {
                $("ryear").not(':contains(1997)').parents('tr').hide();
            });
        });
</script>
<button>Click me to eliminate non-1997 films</button>

</head> 
<body>
<h2>A Table of Remade Movies</h2>
<table border="1">
        <tr>
            <th>Title</th>
            <th>Year</th>
            <th>Original Title</th>
            <th>Original Year</th>
            <th>Fraction</th>
        </tr>
        <xsl:for-each select="remakes/remake">
        <tr>
            <td><rtitle><xsl:value-of select="rtitle"/></rtitle></td>
            <td><ryear><xsl:value-of select="ryear"/></ryear></td>
            <td><stitle><xsl:value-of select="stitle"/></stitle></td>
            <td><syear><xsl:value-of select="syear"/></syear></td>
            <td><fraction><xsl:value-of select="fraction"/></fraction></td>
        </tr>
        </xsl:for-each>
    </table>
</body>
</html>

</xsl:template>
</xsl:stylesheet>

答案 2 :(得分:0)

$(document).ready(function() {
    $("button").on('click', function(){ //.on is usable even if the element is added after your javascript is already be read
        $(this + '[ryear!="1997"]').hide(); //hide the ryear different then 1997
        //$(this + '[ryear!="1997"]').remove(); // use .remove if you want to remove from your html
    });
});