Javascript 如何使用jQuery推导变化表变量

我有以下表格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>

在我创建的第二个代码中，使用拖放更改表，现在我如何获得更新的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或其他东西（应用程序是RubyonRails）。我完全不知道javascript plz会给出详细的解释。

使用jQuery，您可以做类似的事情

(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=>表，该表的格式与启动时的格式相同，并由客户端的用户进行修改

关于与Rails方面的集成，请参见我对第一个问题的回答：

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

(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));