javascript - 以下のように XML データをテーブルに変換して検索するにはどうすればよいですか?

Question

以下のコードを使用してテーブルを検索できるように、同じ構造に従って以下の 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/