jquery将HTML表拆分成多个html表，colspan问题

时间：2018-03-02 16:33:37

标签： jquery

我有一个庞大的HTML表格，我将它们分成多个表格，我在这里有这个代码：

split($("#cost-matrix-table"), 2);

function split($table, chunkSize) {
    var cols = $("tr:nth-child(3) td", $table).length - 1;
    var n = cols / chunkSize;
    var $Htmltext = "";

    for (var i = 1; i <= n * 2; i++) {
        var $newTable = $table.clone();

        for (var j = cols + 1; j > 1; j--) {
            if (j + chunkSize - 1 <= chunkSize * i || j > chunkSize * i + 1) {
                $('td:nth-child(' + j + '),th:nth-child(' + j + ')', $newTable).remove();
            }
        }

        $Htmltext += $newTable[0].outerHTML;
    }

    $("#GridHtml").val($Htmltext);        
}

这是有效的，因为它做了它假设的并将我的表拆分成多个表，但是前两个表行中的表数据有一个2的colspan，它弄乱了下面的行，因为它得到的数量相同将数据表作为具有colspan的行，因此表空数据应为空白空格。

这是一个JSFiddle给你一个问题的例子：

https://jsfiddle.net/gvs1r177/6/ 

$(function() {
  $("#button").on('click', function() {

    split($("#cost-matrix-table"), 2);

  });
});

function split($table, chunkSize) {

  var cols = $("tr:nth-child(3) td", $table).length - 1;

  var n = cols / chunkSize;

  var $Htmltext = "";

  for (var i = 1; i <= n * 2; i++) {

    var $newTable = $table.clone();

    for (var j = cols + 1; j > 1; j--) {

      if (j + chunkSize - 1 <= chunkSize * i || j > chunkSize * i + 1) {

        $('td:nth-child(' + j + '),th:nth-child(' + j + ')', $newTable).remove();

      }
    }

    $Htmltext += $newTable[0].outerHTML;

  }

  $("#GridHtml").html($Htmltext);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="cost-matrix-table" cellpadding=\ "5\" cellspacing=\ "5\" border=\ "1\" width=\ "100%\">
  <tbody>
    <tr>
      <td>Model</td>
      <td colspan="2" align=\ "center\">Parkview M1 Elev A</td>
      <td colspan="2" align=\ "center\">Regalview M1 Elev A</td>
    </tr>
    <tr>
      <td>Sqft</td>
      <td colspan="2" align=\ "center\">1350</td>
      <td colspan="2" align=\ "center\">1380</td>
    </tr>
    <tr style=\ "background-color:#000; color: #FFF;\">
      <td>Items</td>
      <td align=\ "center\">Total Cost</td>
      <td align=\ "center\">Sqft Cost</td>
      <td align=\ "center\">Total Cost</td>
      <td align=\ "center\">Sqft Cost</td>
    </tr>
    <tr></tr>
    <tr>
      <td>Design</td>
      <td align="right">$550</td>
      <td align="right">$0.41</td>
      <td align="right">$550</td>
      <td align="right">$0.40</td>
    </tr>
    <tr>
      <td>Surveying</td>
      <td align="right">$850</td>
      <td align="right">$0.63</td>
      <td align="right">$850</td>
      <td align="right">$0.62</td>
    </tr>
    <tr>
      <td>Final Grading Review</td>
      <td align="right">$325</td>
      <td align="right">$0.24</td>
      <td align="right">$325</td>
      <td align="right">$0.24</td>
    </tr>
    <tr>
      <td>Building Permits</td>
      <td align="right">$1849.5</td>
      <td align="right">$1.37</td>
      <td align="right">$1890.6</td>
      <td align="right">$1.37</td>
    </tr>
    <tr>
      <td>Hydro Trenching</td>
      <td align="right">$440</td>
      <td align="right">$0.33</td>
      <td align="right">$440</td>
      <td align="right">$0.32</td>
    </tr>
    <tr>
      <td>Excavating &amp; Heating</td>
      <td align="right">$1850</td>
      <td align="right">$1.37</td>
      <td align="right">$1850</td>
      <td align="right">$1.34</td>
    </tr>
    <tr>
      <td>Excavation Rentals</td>
      <td align="right">$520</td>
      <td align="right">$0.39</td>
      <td align="right">$520</td>
      <td align="right">$0.38</td>
    </tr>
    <tr>
      <td>Grading</td>
      <td align="right">$350</td>
      <td align="right">$0.26</td>
      <td align="right">$350</td>
      <td align="right">$0.25</td>
    </tr>
    <tr>
      <td>Dye Testing</td>
      <td align="right">$200</td>
      <td align="right">$0.15</td>
      <td align="right">$200</td>
      <td align="right">$0.14</td>
    </tr>
    <tr>
      <td>Pump/Conveyor</td>
      <td align="right">$800</td>
      <td align="right">$0.59</td>
      <td align="right">$800</td>
      <td align="right">$0.58</td>
    </tr>
    <tr>
      <td>Winter Heat</td>
      <td align="right">$224</td>
      <td align="right">$0.17</td>
      <td align="right">$1010</td>
      <td align="right">$0.73</td>
    </tr>
    <tr>
      <td>S/I Foundations</td>
      <td align="right">$0</td>
      <td align="right">$0.00</td>
      <td align="right">$10003</td>
      <td align="right">$7.25</td>
    </tr>
    <tr>
      <td>Dampproofing</td>
      <td align="right">$573</td>
      <td align="right">$0.42</td>
      <td align="right">$570</td>
      <td align="right">$0.41</td>
    </tr>
    <tr>
      <td>Crushed Stone</td>
      <td align="right">$1512</td>
      <td align="right">$1.12</td>
      <td align="right">$1485</td>
      <td align="right">$1.08</td>
    </tr>
    <tr>
      <td>Steel Beam</td>
      <td align="right">$931</td>
      <td align="right">$0.69</td>
      <td align="right">$1700</td>
      <td align="right">$1.23</td>
    </tr>
    <tr>
      <td>Welding</td>
      <td align="right">$260</td>
      <td align="right">$0.19</td>
      <td align="right">$260</td>
      <td align="right">$0.19</td>
    </tr>
    <tr>
      <td>Rebar Installation</td>
      <td align="right">$450</td>
      <td align="right">$0.33</td>
      <td align="right">$450</td>
      <td align="right">$0.33</td>
    </tr>
    <tr>
      <td>Rebar - General Allocations</td>
      <td align="right">$300</td>
      <td align="right">$0.22</td>
      <td align="right">$300</td>
      <td align="right">$0.22</td>
    </tr>
    <tr>
      <td>Basement Windows</td>
      <td align="right">$339.96</td>
      <td align="right">$0.25</td>
      <td align="right">$254.97</td>
      <td align="right">$0.18</td>
    </tr>
    <tr>
      <td>S/I Sewer and Flatwork</td>
      <td align="right">$5327</td>
      <td align="right">$3.95</td>
      <td align="right">$5941</td>
      <td align="right">$4.31</td>
    </tr>
    <tr>
      <td>Load 1 (1st Sub Floor)</td>
      <td align="right">$9585</td>
      <td align="right">$7.10</td>
      <td align="right">$9798</td>
      <td align="right">$7.10</td>
    </tr>
    <tr>
      <td>Rough in materials</td>
      <td align="right">$650</td>
      <td align="right">$0.48</td>
      <td align="right">$650</td>
      <td align="right">$0.47</td>
    </tr>
    <tr>
      <td>Sand &amp; Screw floors</td>
      <td align="right">$153.96</td>
      <td align="right">$0.11</td>
      <td align="right">$157.32</td>
      <td align="right">$0.11</td>
    </tr>
    <tr>
      <td>Trusses</td>
      <td align="right">$2819</td>
      <td align="right">$2.09</td>
      <td align="right">$3725</td>
      <td align="right">$2.70</td>
    </tr>
    <tr>
      <td>Rough Framing</td>
      <td align="right">$12188.5</td>
      <td align="right">$9.03</td>
      <td align="right">$12454.5</td>
      <td align="right">$9.03</td>
    </tr>
    <tr>
      <td>Windows &amp; Doors</td>
      <td align="right">$3749.9</td>
      <td align="right">$2.78</td>
      <td align="right">$2232.16</td>
      <td align="right">$1.62</td>
    </tr>
    <tr>
      <td>Windows &amp; Door Installation</td>
      <td align="right">$970</td>
      <td align="right">$0.72</td>
      <td align="right">$727.5</td>
      <td align="right">$0.53</td>
    </tr>
    <tr>
      <td>Window &amp; Doors Lock Up</td>
      <td align="right">$65</td>
      <td align="right">$0.05</td>
      <td align="right">$65</td>
      <td align="right">$0.05</td>
    </tr>
    <tr>
      <td>Roofing</td>
      <td align="right">$4580</td>
      <td align="right">$3.39</td>
      <td align="right">$4438</td>
      <td align="right">$3.22</td>
    </tr>
    <tr>
      <td>Stairs</td>
      <td align="right">$476</td>
      <td align="right">$0.35</td>
      <td align="right">$452</td>
      <td align="right">$0.33</td>
    </tr>
    <tr>
      <td>Garage Doors</td>
      <td align="right">$1400</td>
      <td align="right">$1.04</td>
      <td align="right">$850</td>
      <td align="right">$0.62</td>
    </tr>
    <tr>
      <td>Heating</td>
      <td align="right">$3900</td>
      <td align="right">$2.89</td>
      <td align="right">$3900</td>
      <td align="right">$2.83</td>
    </tr>
    <tr>
      <td>Electrical</td>
      <td align="right">$5686.92</td>
      <td align="right">$4.21</td>
      <td align="right">$5686.92</td>
      <td align="right">$4.12</td>
    </tr>
    <tr>
      <td>Plumbing Labour</td>
      <td align="right">$3360</td>
      <td align="right">$2.49</td>
      <td align="right">$3360</td>
      <td align="right">$2.43</td>
    </tr>
    <tr>
      <td>Plumbing Fixtures</td>
      <td align="right">$1000</td>
      <td align="right">$0.74</td>
      <td align="right">$1000</td>
      <td align="right">$0.72</td>
    </tr>
    <tr>
      <td>Vacuum</td>
      <td align="right">$160</td>
      <td align="right">$0.12</td>
      <td align="right">$160</td>
      <td align="right">$0.12</td>
    </tr>
    <tr>
      <td>Phone/Cable</td>
      <td align="right">$999</td>
      <td align="right">$0.74</td>
      <td align="right">$999</td>
      <td align="right">$0.72</td>
    </tr>
    <tr>
      <td>Brick</td>
      <td align="right">$1915.254</td>
      <td align="right">$1.42</td>
      <td align="right">$1126.62</td>
      <td align="right">$0.82</td>
    </tr>
    <tr>
      <td>Stone Material</td>
      <td align="right">$648.24</td>
      <td align="right">$0.48</td>
      <td align="right">$177.6</td>
      <td align="right">$0.13</td>
    </tr>
    <tr>
      <td>Number Stone</td>
      <td align="right">$100</td>
      <td align="right">$0.07</td>
      <td align="right">$100</td>
      <td align="right">$0.07</td>
    </tr>
    <tr>
      <td>Bricklayer</td>
      <td align="right">$5049</td>
      <td align="right">$3.74</td>
      <td align="right">$2970</td>
      <td align="right">$2.15</td>
    </tr>
    <tr>
      <td>Angle Iron</td>
      <td align="right">$335</td>
      <td align="right">$0.25</td>
      <td align="right">$175</td>
      <td align="right">$0.13</td>
    </tr>
    <tr>
      <td>Masonry Material</td>
      <td align="right">$388</td>
      <td align="right">$0.29</td>
      <td align="right">$475</td>
      <td align="right">$0.34</td>
    </tr>
    <tr>
      <td>Aluminum</td>
      <td align="right">$4802</td>
      <td align="right">$3.56</td>
      <td align="right">$5652</td>
      <td align="right">$4.10</td>
    </tr>
    <tr>
      <td>Drywall</td>
      <td align="right">$14859.63</td>
      <td align="right">$11.01</td>
      <td align="right">$13536.68</td>
      <td align="right">$9.81</td>
    </tr>
    <tr>
      <td>Steps - Concrete</td>
      <td align="right">$100</td>
      <td align="right">$0.07</td>
      <td align="right">$100</td>
      <td align="right">$0.07</td>
    </tr>
    <tr>
      <td>Curb Repairs</td>
      <td align="right">$200</td>
      <td align="right">$0.15</td>
      <td align="right">$200</td>
      <td align="right">$0.14</td>
    </tr>
    <tr>
      <td>Driveway</td>
      <td align="right">$850</td>
      <td align="right">$0.63</td>
      <td align="right">$850</td>
      <td align="right">$0.62</td>
    </tr>
    <tr>
      <td>Supply &amp; Install Trim</td>
      <td align="right">$7847.5</td>
      <td align="right">$5.81</td>
      <td align="right">$7812.5</td>
      <td align="right">$5.66</td>
    </tr>
    <tr>
      <td>Inside Railing</td>
      <td align="right">$606</td>
      <td align="right">$0.45</td>
      <td align="right">$426</td>
      <td align="right">$0.31</td>
    </tr>
    <tr>
      <td>Painting</td>
      <td align="right">$2822.6</td>
      <td align="right">$2.09</td>
      <td align="right">$2884.2</td>
      <td align="right">$2.09</td>
    </tr>
    <tr>
      <td>Ceramic Flooring</td>
      <td align="right">$2112.25</td>
      <td align="right">$1.56</td>
      <td align="right">$2493.05</td>
      <td align="right">$1.81</td>
    </tr>
    <tr>
      <td>Cabinetry</td>
      <td align="right">$3936</td>
      <td align="right">$2.92</td>
      <td align="right">$3974</td>
      <td align="right">$2.88</td>
    </tr>
    <tr>
      <td>Mirrors</td>
      <td align="right">$140</td>
      <td align="right">$0.10</td>
      <td align="right">$70</td>
      <td align="right">$0.05</td>
    </tr>
    <tr>
      <td>Closets</td>
      <td align="right">$272</td>
      <td align="right">$0.20</td>
      <td align="right">$297.5</td>
      <td align="right">$0.22</td>
    </tr>
    <tr>
      <td>Carpets</td>
      <td align="right">$1338.75</td>
      <td align="right">$0.99</td>
      <td align="right">$1181.25</td>
      <td align="right">$0.86</td>
    </tr>
    <tr>
      <td>Miscellaneous</td>
      <td align="right">$300</td>
      <td align="right">$0.22</td>
      <td align="right">$300</td>
      <td align="right">$0.22</td>
    </tr>
    <tr>
      <td>Construction Site Fuel</td>
      <td align="right">$250</td>
      <td align="right">$0.19</td>
      <td align="right">$250</td>
      <td align="right">$0.18</td>
    </tr>
    <tr>
      <td>Construction Site Heating</td>
      <td align="right">$400</td>
      <td align="right">$0.30</td>
      <td align="right">$400</td>
      <td align="right">$0.29</td>
    </tr>
    <tr>
      <td>Equipment Rental</td>
      <td align="right">$400</td>
      <td align="right">$0.30</td>
      <td align="right">$400</td>
      <td align="right">$0.29</td>
    </tr>
    <tr>
      <td>Landscaping</td>
      <td align="right">$2800</td>
      <td align="right">$2.07</td>
      <td align="right">$2800</td>
      <td align="right">$2.03</td>
    </tr>
    <tr>
      <td>Landscaping - tree planing</td>
      <td align="right">$333</td>
      <td align="right">$0.25</td>
      <td align="right">$333</td>
      <td align="right">$0.24</td>
    </tr>
    <tr>
      <td>Waste Disposal</td>
      <td align="right">$750</td>
      <td align="right">$0.56</td>
      <td align="right">$750</td>
      <td align="right">$0.54</td>
    </tr>
    <tr>
      <td>Furnace/Duct Cleaning</td>
      <td align="right">$220</td>
      <td align="right">$0.16</td>
      <td align="right">$220</td>
      <td align="right">$0.16</td>
    </tr>
    <tr>
      <td>Cleaning</td>
      <td align="right">$256.6</td>
      <td align="right">$0.19</td>
      <td align="right">$262.2</td>
      <td align="right">$0.19</td>
    </tr>
    <tr>
      <td>Water Heater Rebate</td>
      <td align="right">$-350</td>
      <td align="right">$-0.26</td>
      <td align="right">$-350</td>
      <td align="right">$-0.25</td>
    </tr>
    <tr>
      <td>Utilities</td>
      <td align="right">$700</td>
      <td align="right">$0.52</td>
      <td align="right">$700</td>
      <td align="right">$0.51</td>
    </tr>
    <tr>
      <td>Insurance</td>
      <td align="right">$500</td>
      <td align="right">$0.37</td>
      <td align="right">$500</td>
      <td align="right">$0.36</td>
    </tr>
    <tr>
      <td>PDI Costs</td>
      <td align="right">$230</td>
      <td align="right">$0.17</td>
      <td align="right">$230</td>
      <td align="right">$0.17</td>
    </tr>
    <tr>
      <td>Health &amp; Safety Costs</td>
      <td align="right">$125</td>
      <td align="right">$0.09</td>
      <td align="right">$125</td>
      <td align="right">$0.09</td>
    </tr>
    <tr>
      <td>On Site Security</td>
      <td align="right">$250</td>
      <td align="right">$0.19</td>
      <td align="right">$250</td>
      <td align="right">$0.18</td>
    </tr>
    <tr>
      <td>Hydro Hookup</td>
      <td align="right">$0</td>
      <td align="right">$0.00</td>
      <td align="right">$0</td>
      <td align="right">$0.00</td>
    </tr>
    <tr>
      <td>Warranty/Repair - General</td>
      <td align="right">$1500</td>
      <td align="right">$1.11</td>
      <td align="right">$1500</td>
      <td align="right">$1.09</td>
    </tr>
    <tr>
      <td>Warranty Manuals</td>
      <td align="right">$0</td>
      <td align="right">$0.00</td>
      <td align="right">$0</td>
      <td align="right">$0.00</td>
    </tr>
    <tr>
      <td>Street Cleaning</td>
      <td align="right">$400</td>
      <td align="right">$0.30</td>
      <td align="right">$400</td>
      <td align="right">$0.29</td>
    </tr>
    <tr>
      <td>Customer Gift(s)</td>
      <td align="right">$100</td>
      <td align="right">$0.07</td>
      <td align="right">$100</td>
      <td align="right">$0.07</td>
    </tr>
    <tr>
      <td>Customer Experience Initiative</td>
      <td align="right">$40</td>
      <td align="right">$0.03</td>
      <td align="right">$40</td>
      <td align="right">$0.03</td>
    </tr>
    <tr>
      <td>Learn Losani</td>
      <td align="right">$75</td>
      <td align="right">$0.06</td>
      <td align="right">$75</td>
      <td align="right">$0.05</td>
    </tr>
    <tr>
      <td>Conasys</td>
      <td align="right">$</td>
      <td align="right">$</td>
      <td align="right">$</td>
      <td align="right">$</td>
    </tr>
    <tr>
      <td>Legal Contingency</td>
      <td align="right">$</td>
      <td align="right">$</td>
      <td align="right">$</td>
      <td align="right">$</td>
    </tr>
    <tr>
      <td>VTB Mortgage Interest</td>
      <td align="right">$2700</td>
      <td align="right">$2.00</td>
      <td align="right">$2700</td>
      <td align="right">$1.96</td>
    </tr>
    <tr>
      <td>Realty Tax</td>
      <td align="right">$500</td>
      <td align="right">$0.37</td>
      <td align="right">$500</td>
      <td align="right">$0.36</td>
    </tr>
    <tr>
      <td>Interest</td>
      <td align="right">$1800</td>
      <td align="right">$1.33</td>
      <td align="right">$1800</td>
      <td align="right">$1.30</td>
    </tr>
    <tr>
      <td>Legal Finance Fees</td>
      <td align="right">$100</td>
      <td align="right">$0.07</td>
      <td align="right">$100</td>
      <td align="right">$0.07</td>
    </tr>
    <tr>
      <td>Bank Finance Fees</td>
      <td align="right">$125</td>
      <td align="right">$0.09</td>
      <td align="right">$125</td>
      <td align="right">$0.09</td>
    </tr>
    <tr>
      <td>Legal Closing - House</td>
      <td align="right">$1000</td>
      <td align="right">$0.74</td>
      <td align="right">$1000</td>
      <td align="right">$0.72</td>
    </tr>
    <tr>
      <td>Total</td>
      <td align="right">$141864.18</td>
      <td align="right">$105.08</td>
      <td align="right">$147915.60</td>
      <td align="right">$107.19</td>
    </tr>
  </tbody>
</table>

<input type="button" id="button" value="click here" />

<div id="GridHtml">
</div>

我如何调整此代码以说明它不是前两行还是colspan是1来获取那些额外的表数据。

我希望这是有道理的。

更新

我添加了一些代码来删除那些给我带来麻烦的前两行：

function split($table, chunkSize) {

        var cols = $("tr:nth-child(3) td", $table).length - 1;

        var n = cols / chunkSize;

        var $Htmltext = "";

        var newChunkSize = chunkSize * 2;

        for (var i = 1; i <= n * 2; i++) {

            var $newTable = $table.clone();

            $("tr:first-child", $newTable).remove();
            $("tr:first-child", $newTable).remove();


            for (var j = cols + 1; j > 1; j--) {

                if (j + newChunkSize - 1 <= newChunkSize * i || j > newChunkSize * i + 1) {

                    $('td:nth-child(' + j + '),th:nth-child(' + j + ')', $newTable).remove();

                }
            }

            $Htmltext += $newTable[0].outerHTML;

        }

        $("#GridHtml").val($Htmltext);

    }

我想我现在的计划是将这两行放入变量中，然后在完成后将它们重新添加？

更新

因此将表分成两个，一个用于标题，第二个用于数据，现在我所要做的就是将这两个表重新组合在一起。

function split($table, chunkSize) {

        var cols = $("tr:nth-child(3) td", $table).length - 1;

        var n = cols / chunkSize;

        var newChunkSize = chunkSize / 2;

        var $Htmltext = "";

        for (var i = 1; i <= n; i++) {

            var $newTable = $table.clone();
            var $newTableHeadings = $table.clone();

            $("tr:first-child", $newTable).remove();
            $("tr:first-child", $newTable).remove();

            $("tr:not(:nth-child(1)):not(:nth-child(2))", $newTableHeadings).remove();

            for (var j = cols + 1; j > 1; j--) {

                if (j + chunkSize - 1 <= chunkSize * i || j > chunkSize * i + 1) {

                    $('td:nth-child(' + j + '),th:nth-child(' + j + ')', $newTable).remove();

                }

                if (j + newChunkSize - 1 <= newChunkSize * i || j > newChunkSize * i + 1) {

                    $('td:nth-child(' + j + '),th:nth-child(' + j + ')', $newTableHeadings).remove();

                }
            }

            //Combine the two tables.

            $Htmltext += $newTable[0].outerHTML;

        }

        $("#GridHtml").val($Htmltext);

    }

0 个答案:

没有答案
相关问题
最新问题