0

我需要弄清楚如何按照相同的结构将下面的 XML 数据添加到下表中，以便允许使用下面的代码在表中进行搜索。通过页面底部的 Jsfiddle 链接显示。

我想添加到表中的 XML 数据：

  var ShoesXML = "<All><Shoe><Name>All Stars</Name><BrandName>Converse</AlbumName><ReleaseDate>10/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe><Shoe><Name>All Star1s</Name><BrandName>Converse1</AlbumName><ReleaseDate>11/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe></All>";

这是我通常搜索的表格格式（我想使用 XMLdata 变量 ShoesXML 创建它：

    <input type="text" id="search">
<table>
<thead>
   <tr>
        <th>Name</th>
        <th>Brand Name</th>
        <th>Release Date</th>
        <th>Picture</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><span>All Stars</span></td>
        <td>Converse</td>
        <td>10/2/08</td>
        <td><img src="pic.jpg"/></td>
    </tr>
    <tr>
        <td><span>All Stars1</span></td>
        <td>Converse1</td>
        <td>11/2/08</td>
        <td><img src="pic1.jpg"/></td>
    </tr>
</tbody>
</table>

我通常使用文本框搜索上述表格结构的代码：

<script type='text/javascript'>
$("#search").on("keyup paste", function() {
    var value = $(this).val().toUpperCase();
    var $rows = $("table tr");

    $rows.each(function(index) {
        if (index !== 0) {
            $row = $(this);
            var column1 = $row.find("td:first span").html().toUpperCase();
            if (column1.indexOf(value) > -1) {
                $row.show();
            }
            else {
                $row.hide();
            }
        }
    });
});

</script>

当前程序 Jsfiddle：http: //jsfiddle.net/AYXG4/

4

1 回答 1

2

您的 XML 已关闭，因为 BrandName 由标签 AlbumName 关闭。但是，一旦修复（如ShoesXML下面的字符串），这样的事情应该可以工作：

var ShoesXML = "<All><Shoe><Name>All Stars</Name><BrandName>Converse</BrandName><ReleaseDate>10/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe><Shoe><Name>All Star1s</Name><BrandName>Converse1</BrandName><ReleaseDate>11/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe></All>";

$(document).ready(function() {  
  xmlDoc=$.parseXML( ShoesXML );
  $(xmlDoc).find("Shoe").each(function(i, n) {
        var html = "<tr>\n" + 
            "<td><span>" + $(n).find("Name").text() + "</span></td>\n" +
            "<td>" +  $(n).find("BrandName").text() + "</td>\n" +
            "<td>" + $(n).find("ReleaseDate").text() + "</td>\n" + 
            "<td><img src='" + $(n).find("Picture").text() + "'></td>\n" +
            "</tr>";
        $("table.shoetable tbody").append(html);
    });
});

jsFiddle：http: //jsfiddle.net/JhFhd/2/

上面的代码所做的是使用 jQuery 解析您的 XML，然后在每个Shoe标签中找到适当的列并生成您的 HTML 表格行。从那里，它将其附加到tbody带有 class 的表部分shoetable。由于它已附加到您的表结构中，因此您的搜索功能应该可以正常工作。

您可以优化上述一些，但这应该足以让您入门。

于 2013-03-21T15:32:27.103 回答