如何使用jQuery推断更改表变量 [英] How to deduce changing table variable using jQuery
本文介绍了如何使用jQuery推断更改表变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个表HTML代码：
I have this table HTML code :
<table id="portfolios" width="500" border="1" align="center" height="300">
<thead class="colHeaders">
<tr><th class="weight" bgcolor="#999999"><h4> Weight in Motif </h3></th>
<th class="name" bgcolor="#999999"><h4> Segment & Stocks</h3></th>
<th class="price" bgcolor="#999999"><h4> Name of stock </h3></th>
</thead>
<tr id="titles" value="Disable Sort">
<th bgcolor="#CCCCCC"> <h5> 100.0 </th>
<th bgcolor="#CCCCCC"> <h5> test3 </th>
<th bgcolor="#CCCCCC"> <h5> </th>
</tr>
<tr id="Stocks">
<th> 55.8 </th>
<th> stock id3 </th>
<td id="Indian-Oil-Corporation-Ltd.">
<a href="www.dalal-street.in/Indian-Oil-Corporation-Ltd">Indian-Oil-Corporation-Ltd.</a>
</td>
</tr>
<tr id="Stocks">
<th> 44.2 </th>
<th> stock id4 </th>
<td id="Power-Finance-Corporation-Ltd.">
<a href="www.dalal-street.in/Power-Finance-Corporation-Ltd">Power-Finance-Corporation-Ltd.</a>
</td>
</tr>
<tr id="titles" value="Disable Sort">
<th bgcolor="#CCCCCC"> <h5> 100.0 </th>
<th bgcolor="#CCCCCC"> <h5> test </th>
<th bgcolor="#CCCCCC"> <h5> </th>
</tr>
<tr id="Stocks">
<th> 55.8 </th>
<th> stock id3 </th>
<td id="Indian-Oil-Corporation-Ltd.">
<a href="www.dalal-street.in/Indian-Oil-Corporation-Ltd">Indian-Oil-Corporation-Ltd.</a>
</td>
</tr>
<tr id="Stocks">
<th> 44.2 </th>
<th> stock id4 </th>
<td id="Power-Finance-Corporation-Ltd.">
<a href="www.dalal-street.in/Power-Finance-Corporation-Ltd">Power-Finance-Corporation-Ltd.</a>
</td>
</tr>
<tr id="titles" value="Disable Sort">
<th bgcolor="#CCCCCC"> <h5> 100.0 </th>
<th bgcolor="#CCCCCC"> <h5> test2 </th>
<th bgcolor="#CCCCCC"> <h5> </th>
</tr>
<tr id="Stocks">
<th> 55.8 </th>
<th> stock id3 </th>
<td id="Indian-Oil-Corporation-Ltd.">
<a href="www.dalal-street.in/Indian-Oil-Corporation-Ltd">Indian-Oil-Corporation-Ltd.</a>
</td>
</tr>
<tr id="Stocks">
<th> 44.2 </th>
<th> stock id4 </th>
<td id="Power-Finance-Corporation-Ltd.">
<a href="www.dalal-street.in/Power-Finance-Corporation-Ltd">Power-Finance-Corporation-Ltd.</a>
</td>
</tr>
这也是：
<table id="portfolios" width="500" border="1" align="center" height="300">
<thead class="colHeaders">
<tr><th class="weight" bgcolor="#999999"><h4> Weight in Motif </h3></th>
<th class="name" bgcolor="#999999"><h4> Segment & Stocks</h3></th>
<th class="price" bgcolor="#999999"><h4> Name of stock </h3></th>
</thead>
<tr id="titles" value="Disable Sort">
<th bgcolor="#CCCCCC"> <h5> 100.0 </th>
<th bgcolor="#CCCCCC"> <h5> test3 </th>
<th bgcolor="#CCCCCC"> <h5> </th>
</tr>
<tr id="Stocks">
<th> 55.8 </th>
<th> stock id3 </th>
<td id="Indian-Oil-Corporation-Ltd.">
<a href="www.dalal-street.in/Indian-Oil-Corporation-Ltd">Indian-Oil-Corporation-Ltd.</a>
</td>
</tr>
<tr id="Stocks">
<th> 44.2 </th>
<th> stock id4 </th>
<td id="Power-Finance-Corporation-Ltd.">
<a href="www.dalal-street.in/Power-Finance-Corporation-Ltd">Power-Finance-Corporation-Ltd.</a>
</td>
</tr>
<tr id="titles" value="Disable Sort">
<th bgcolor="#CCCCCC"> <h5> 100.0 </th>
<th bgcolor="#CCCCCC"> <h5> test </th>
<th bgcolor="#CCCCCC"> <h5> </th>
</tr>
<tr id="Stocks">
<th> 55.8 </th>
<th> stock id3 </th>
<td id="Indian-Oil-Corporation-Ltd.">
<a href="www.dalal-street.in/Indian-Oil-Corporation-Ltd">Indian-Oil-Corporation-Ltd.</a>
</td>
</tr>
<tr id="Stocks">
<th> 44.2 </th>
<th> stock id4 </th>
<td id="Power-Finance-Corporation-Ltd.">
<a href="www.dalal-street.in/Power-Finance-Corporation-Ltd">Power-Finance-Corporation-Ltd.</a>
</td>
</tr>
<tr id="titles" value="Disable Sort">
<th bgcolor="#CCCCCC"> <h5> 100.0 </th>
<th bgcolor="#CCCCCC"> <h5> test2 </th>
<th bgcolor="#CCCCCC"> <h5> </th>
</tr>
<tr id="Stocks">
<th> 55.8 </th>
<th> stock id3 </th>
<td id="Indian-Oil-Corporation-Ltd.">
<a href="www.dalal-street.in/Indian-Oil-Corporation-Ltd">Indian-Oil-Corporation-Ltd.</a>
</td>
</tr>
<tr id="Stocks">
<th> 44.2 </th>
<th> stock id4 </th>
<td id="Power-Finance-Corporation-Ltd.">
<a href="www.dalal-street.in/Power-Finance-Corporation-Ltd">Power-Finance-Corporation-Ltd.</a>
</td>
</tr>
基本上这两个都是生成的来自erb file的HTML代码。现在使用的第一个代码变量是：
Basically both of this are generated HTML code from erb file.Now in first code variable used is this :
h=[ { "folder" => "test3",
"weight" => "100.0",
"stocks" => [{ "id" => "stock id3",
"name" => "Indian Oil Corporation Ltd.",
"weight" => "55.8"},
{ "id" => "stock id4",
"name" => "Power Finance Corporation Ltd.",
"weight" => "44.2" }
]},
{ "folder" => "test",
"weight" => "100.0",
"stocks" => [{ "id" => "stock id3",
"name" => "Indian Oil Corporation Ltd.",
"weight"=> "55.8"},
{"id" => "stock id4",
"name" => "Power Finance Corporation Ltd.",
"weight"=> "44.2"}]
},
{ "folder" => "test2",
"weight" => "100.0",
"stocks" => [{ "id" => "stock id3",
"name" => "Indian Oil Corporation Ltd.",
"weight"=> "55.8"},
{"id" => "stock id4",
"name" => "Power Finance Corporation Ltd.",
"weight"=> "44.2"
}]
}
]
然而在我创建表的第二个代码是使用拖放更改的，现在我如何获得更新的h变量，这将是：
Whereas in thse second code I created the table is changed using drag and drop , Now how i can get an updated h variable which will be this :
h=[ { "folder" => "test3",
"weight" => "100.0",
"stocks" => [{"id" => "stock id3",
"name" => "Indian Oil Corporation Ltd.",
"weight" => "55.8"},
{"id" => "stock id4",
"name" => "Power Finance Corporation Ltd.",
"weight" => "44.2"},
{"id" => "stock id3",
"name" => "Indian Oil Corporation Ltd.",
"weight" => "55.8"},
{"id" => "stock id4",
"name" => "Power Finance Corporation Ltd.",
"weight" => "44.2"},
{"id" => "stock id3",
"name" => "Indian Oil Corporation Ltd.",
"weight" => "55.8"},
{"id" => "stock id4",
"name" => "Power Finance Corporation Ltd.",
"weight" => "44.2"}]
},
{ "folder" => "test",
"weight" => "100.0",
"stocks" => [],
{ "folder" => "test2",
"weight" => "100.0",
"stocks" => []
}
]
使用Javascript或其他东西（APP是红宝石）在轨道上）。我完全没有意识到javascript plz给出了详细的解释。
using Javascript or something else (APP is ruby on rails ). I am completely unaware of javascript plz give a detailed explanation.
推荐答案
使用jQuery你可以做这样的事情。
Using jQuery you could do something like this.
(function ($) {
retrieveTable = function () {
// define an output table variable
var h = [];
// and an empty variable for the current folder
var current_folder = {};
// define tables that contain the keys for your values inside the table
keys = {
titles: ['weight', 'folder', 'stocks'],
stocks: ['weight', 'id', 'name']
};
// select all rows in your table and iterate through them
$('#portfolios tr').each(function (index, row) {
// make sure you don't cacth the row in thead
// (another solution would be to have an actual tbody
// and iterate over it directly $("#portfolios tbody tr"))
if (!$(row).parents('thead').length > 0) {
// check if the row is a title
if ($(row).attr('id') == 'titles') {
// if it is a title, that means that we are in a new folder
// set the current_folder variable and add it to the table
current_folder = {};
h.push(current_folder);
// and fill it with the info from this first row
$(row).children('th').each(function (iindex,title) {
current_folder[keys.titles[iindex]] = cleanText($(title).text());
});
// define an array as the value for the 'stocks' key
current_folder['stocks'] = [];
} else {
// if the 'tr' is not a 'titles', then it must be a 'Stocks'
// you can fill it with the info with the table
// before adding it to the current_folder['stocks'] array
current_stock = {};
// your 'th' correspond to weight and id and 'tr' to stock name
$(row).children('th, td').each(function (iindex,attribut) {
current_stock[keys.stocks[iindex]] = cleanText($(attribut).text());
});
// then you can add the stock to the 'stocks' array
current_folder['stocks'].push(current_stock);
};
};
});
return h;
};
cleanText = function (strg) {
return strg.replace(/^\s+/,'').replace(/\s+$/,'');
};
}(jQuery));
然后当你检索到retrieveTable（）对象时，将它发送回你的Rails服务器，解析它作为JSON使它成为一个ruby Hash =>，它为您提供一个与您开始时相同格式的表，以及客户端用户的修改。
Then when you have retrieved the retrieveTable() object, send it back to your Rails server, parse it as JSON to make it a ruby Hash => that gives you a table in the same format as the one from which you started, with modifications from your user on the client side.
为了与Rails方面集成，请在此处查看我对第一个问题的回答：
将HTMl表值反转为ruby变量
For integration with the Rails side, see my answer to your first question here: Reversing HTMl table value to ruby variable
这篇关于如何使用jQuery推断更改表变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
