0

このようなテーブルがあります

<table>
    <tr>
        <td>Item1<td>
        <td><p>Description<p><br><td>
    </tr>
    <tr>
        <td>Item2<td>
        <td><p>Description1</p><p>Description2</p><br><td>
    </tr>
    <tr>
        <td>Item3<td>
        <td><p>Description3<p><br><td>
    </tr>
</table>

ここに、アイテムの配列を取得するための私のJavaScriptがあります

var iList = document.querySelectorAll('td:first');

ここでは、マップされたすべてのtd pコンテンツを取得します

var iDesc = document.querySelectorAll('td:second p');

ちなみに、マップされたものを作成し、そのコンテンツを onload イベントでソートしたいと思います。私がしていることは正しいですか？私はセレクターを意味td:firstし、私の例のテーブルでは2番目です

上記の例では、2 を含む要素が 1 つありますtd。p

4

2 に答える 2

1

疑似セレクター:firstと:secondは存在しません ( :firstjQuery には存在しますが、CSS セレクターではありません)。CSS セレクターの公式リストは次のとおりです。

ここで必要なのは:nth-child疑似セレクターです: 

var iList = document.querySelectorAll('td:nth-child(1)');    
var iDesc = document.querySelectorAll('td:nth-child(2) p');

PS : コードに注意してください。閉じるのではなく<td>s、新しいものを再度開きます。閉じる必要は<td>ありません。つまり、これ<tr>には 4 つ<td>の sがあります。

<tr>
    <td>Item1
    <td>
    <td><p>Description<p><br>
    <td>
</tr>
于 2012-11-12T11:22:45.417 に答える
0

各 tr 要素に対してループを実行し、td 要素からキーと値を取得する必要があります。次に、それらを配列にプッシュします。

var arr = new Array();
$('table tr').each(function() {
    var $row = $(this);
    var key = $row.find('td:first').html();
    var value = $row.find('td:last').html();
    arr.push([key, value]);
});

最後に、配列を最初のインデックスで並べ替えます。

arr.sort(function(a, b) {
    var valueA, valueB;
    valueA = a[0]; // Where 1 is your index, from your example
    valueB = b[0];
    if (valueA < valueB) {
        return -1;
    }
    else if (valueA > valueB) {
        return 1;
    }
    return 0;
});

ライブデモ

于 2012-11-12T11:47:20.677 に答える