2017-02-01 6 views
1

N行7列のHTMLテーブルがあります。 enter image description here​​値の文字列がjQueryの場合<tr>オブジェクト

私は、テーブルのすべての行を見つけるためにjQuery selectを使用しました。

$("#TaskListing table tr").each(function (index, element) { codeBlock }) 

私は列ID、カテゴリーやタイトルの値を取得し、HTMLページをホストしているサーバー上の.jsonファイルにこのすべてを保存したいです。

IDB、カテゴリ、タイトルの各行の値を取得するのに、どのコードをcodeBlockで使用しますか?

以下は、テーブルを作成するために使用するコードです。

var tableObj = $("#TaskListing table").append(
    "<tr class=rows id=TaskId>" + 
     "<td id=Begin><input id=onoff type=checkbox " + ischecked + "></td>" + 
     "<td id=Unique>" + idnum + "</td>" + 
     "<td id=Cat contenteditable='true'>" + catstr + "</td>" + 
     "<td id=Title contenteditable='true'>" + titlestr + "</td>" + 
     "<td id=Time ondblclick=\"editElapsedTime(" + idnum + ")\">" + timeStr + "</td>" + 
     "<td id=Percent>0</td>" + 
     "<td id=Trash><input name=TrashInput" + idnum + " type=image src=trashcan.jpg height=30 width=30 /></td>" + 
    "</tr>" 
); 
+1

長期的に時間を節約したい場合は、https://datatables.net/を使用することをおすすめします。 –

答えて

2

ストアの各列についてtdのすべての要素、およびそのような.eq()を使用して、それぞれのtdを得る:

var dataStore = []; 

$("#TaskListing table tr").each(function (index, element) { 

    // store each td for each iterated rows 
    var tds = $(this).find('td'); 
    // .eq(1) is a zero-based, then start with 1 for column no 2 
    var idClmn = tds.eq(1); // id column 
    var catClmn = tds.eq(2); // category column 
    var titClmn = tds.eq(3); // title column 
    var obj = {}; 

    // getting text 
    console.log(idClmn.text(), catClmn.text(), titClmn.text()); 

    // here continue populate data into object or else 
    obj.id = idClmn.text(); 
    obj.category = catClmn.text(); 
    obj.title = titClmn.text(); 
    // push onto 
    dataStore.push(obj); 

}); 

console.log(dataStore); 

P/S:id=TaskId、IDは一意である必要があります。代わりにクラスで置き換えることができます。同じidのtdに行く

2

これはjsonオブジェクトを作成します。

var jsonObj = []; 
$("#TaskListing table tr").each(function (index, element) { 

item = {} 
item ["id"] = $(this).find('td#Unique').text(); 
item ["Cat"] = $(this).find('td#Cat').text(); 
item ["Title"] = $(this).find('td#Title').text(); 

jsonObj.push(item); 
}); 
関連する問題