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

而在我创建的第二个代码中，表是使用拖放更改的，现在我如何获得更新的 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请给出详细解释。

score 1 · Accepted Answer

使用 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 方面的集成，请参阅我对您的第一个问题的回答：将 HTMl 表值反转为 ruby 变量

javascript - 如何使用 jQuery 推断更改的表变量

1 回答 1

Related

Reference