javascript - jQueryを使用してテーブル変数の変化を推測する方法

Question

私はこのテーブルHTMLコードを持っています:

<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 &amp; 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 &amp; 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 ファイルから生成された HTML コードです。最初のコード変数で使用されるのは次のとおりです。

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"
                      }]
     }
  ]

私が作成した2番目のコードでは、ドラッグアンドドロップを使用してテーブルが変更されていますが、更新されたh変数を取得する方法は次のとおりです。

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 は ruby​​ on rails です)。私はJavaScriptを完全に認識していません.詳細な説明をお願いします.