javascript - Jquery表行计算，多行/列

标签 javascript jquery

我有一张 table ，第一行代表月份。接下来是值。我不想引入聚合/行计算方法并将其显示在最后一行。由于行和列的数量，我不太确定从哪里开始并且不重复代码。 因此我正在寻找一些开始的提示。

我准备了一个mcve给你看看怎么样https://jsfiddle.net/468bguu1/2/

公式为

第 1 个月的计算 ROW 为:(.inc_row_0 + .inc_row_kor_0) - (.exp_row_0 + .exp_row_kor_0 + .work_row_0)

为了方便计算，我添加了类名称，我认为应该这样做。

<table class="table table-striped table-bordered dataTable no-footer dtr-inline mt-5 table2excel">
          <thead class="btn-primary bg-primary">
            <tr>
              <th></th>
              <th>1</th>
              <th>2</th>
              <th>3</th>
              <th>4</th>
              <th>5</th>
              <th>6</th>
              <th>7</th>
              <th>8</th>
              <th>9</th>
              <th>10</th>
              <th>11</th>
              <th>12</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr class="btn-primary bg-success">
              <td>ROW A Σ</td>
              <td class="inc_row_0">0,00</td>
              <td class="inc_row_1">0,00</td>
              <td class="inc_row_2">0,00</td>
              <td class="inc_row_3">0,00</td>
              <td class="inc_row_4">0,00</td>
              <td class="inc_row_5">0,00</td>
              <td class="inc_row_6">0,00</td>
              <td class="inc_row_7">103 091,99</td>
              <td class="inc_row_8">74 247,97</td>
              <td class="inc_row_9">42 660,39</td>
              <td class="inc_row_10">179 264,64</td>
              <td class="inc_row_11">9 693,49</td>
              <td></td>
            </tr>
            <tr class="btn-primary bg-success">
              <td>ROW A Adjust</td>
              <td class="inc_row_kor_0">0,00</td>
              <td class="inc_row_kor_1">0,00</td>
              <td class="inc_row_kor_2">0,00</td>
              <td class="inc_row_kor_3">0,00</td>
              <td class="inc_row_kor_4">0,00</td>
              <td class="inc_row_kor_5">0,00</td>
              <td class="inc_row_kor_6">0,00</td>
              <td class="inc_row_kor_7">0,00</td>
              <td class="inc_row_kor_8">0,00</td>
              <td class="inc_row_kor_9">0,00</td>
              <td class="inc_row_kor_10">0,00</td>
              <td class="inc_row_kor_11">0,00</td>
              <td></td>
            </tr>

            <tr class="btn-primary bg-danger">
              <td>ROW C</td>
              <td class="exp_row_0">0,00</td>
              <td class="exp_row_1">0,00</td>
              <td class="exp_row_2">0,00</td>
              <td class="exp_row_3">0,00</td>
              <td class="exp_row_4">0,00</td>
              <td class="exp_row_5">387,71</td>
              <td class="exp_row_6">387,71</td>
              <td class="exp_row_7">71 026,92</td>
              <td class="exp_row_8">43 914,10</td>
              <td class="exp_row_9">73 705,35</td>
              <td class="exp_row_10">77 213,29</td>
              <td class="exp_row_11">33,00</td>
              <td></td>
            </tr>

            <tr class="btn-primary bg-danger">
              <td>ROW C Adjust</td>
              <td class="exp_row_kor_0">0,00</td>
              <td class="exp_row_kor_1">0,00</td>
              <td class="exp_row_kor_2">0,00</td>
              <td class="exp_row_kor_3">0,00</td>
              <td class="exp_row_kor_4">0,00</td>
              <td class="exp_row_kor_5">0,00</td>
              <td class="exp_row_kor_6">0,00</td>
              <td class="exp_row_kor_7">0,00</td>
              <td class="exp_row_kor_8">0,00</td>
              <td class="exp_row_kor_9">0,00</td>
              <td class="exp_row_kor_10">0,00</td>
              <td class="exp_row_kor_11">0,00</td>
              <td></td>
            </tr>
            <tr></tr>
          </tbody>
          <tbody>
            <tr class="btn-primary bg-warning">
              <td>ROW D</td>
              <td class="work_row_0">0,00</td>
              <td class="work_row_1">0,00</td>
              <td class="work_row_2">0,00</td>
              <td class="work_row_3">0,00</td>
              <td class="work_row_4">0,00</td>
              <td class="work_row_5">0,00</td>
              <td class="work_row_6">0,00</td>
              <td class="work_row_7">30 788,44</td>
              <td class="work_row_8">27 522,85</td>
              <td class="work_row_9">25 827,27</td>
              <td class="work_row_10">22 443,28</td>
              <td class="work_row_11">-10 000,60</td>
              <td></td>
            </tr>
            <tr></tr>
          </tbody>

          <tbody>
            <tr class="btn-primary bg-primary">
              <td>Calculations ROW</td>
              <th class="res_row_0">x</th>
              <th class="res_row_1"></th>
              <th class="res_row_2"></th>
              <th class="res_row_3"></th>
              <th class="res_row_4"></th>
              <th class="res_row_5"></th>
              <th class="res_row_6"></th>
              <th class="res_row_7"></th>
              <th class="res_row_8"></th>
              <th class="res_row_9"></th>
              <th class="res_row_10"></th>
              <th class="res_row_11"></th>

            </tr>

          </tbody>
        </table>

我的尝试:(首先必须将文本标准化为 float )

     for (var i = 0; i < 12; i++) {
   var row_a = parseFloat($(".inc_row_" + i).text().replace(/ /g, '').replace(',', '.')) + parseFloat($(".inc_row_kor_" + i).text().replace(/ /g, '').replace(',', '.'));
   var row_b = parseFloat($(".exp_row_" + i).text().replace(/ /g, '').replace(',', '.')) + parseFloat($(".exp_row_kor_" + i).text().replace(/ /g, '').replace(',', '.')) + parseFloat($(".work_row_" + i).text().replace(/ /g, '').replace(',', '.'));
   var calc = row_a - row_b;

   $(".res_row_" + i).text(calc.toFixed(2));
 }

最佳答案

这两者都取决于所选择的行单元格计数是否相等。 整个“以选择器开头”对于每个“组”项目使用单个类会更好，使选择器更简单，更快且更易于维护，但我不负责您的布局，只是一个建议。

首先，这是一个非常详细的选项，用于展示如何使用一组包含其中数据的数组。当表更改时，或者如果表“行”之一丢失或有额外的 td ，这可能会出现问题，这可能不太好。

function parseLocalString(localstring) {
  var strippedstring = localstring.replace(/ /g, '').replace(',', '.');
  var localnumber = parseFloat(strippedstring);
  return localnumber;
}
var myObj = {
  data: {}
}; // hold stuff without a lot of globals
myObj.data = {
  // arrays of numbers
  incRow: [],
  incRowKor: [],
  expRow: [],
  expRowKor: [],
  workRow: [],
  resRow: [],
};
// avoid the fixed 12, just get the stuff
// begins with
$("td[class^='inc_row_']").filter(function() {
  return !$(this).is("td[class^='inc_row_kor_']");
}).each(function() {
  myObj.data.incRow.push(parseLocalString($(this).text()));
});
$("td[class^='inc_row_kor_']").each(function() {
  myObj.data.incRowKor.push(parseLocalString($(this).text()));
});

$("td[class^='exp_row_']").filter(function() {
  return !$(this).is("td[class^='exp_row_kor_']");
}).each(function() {
  myObj.data.expRow.push(parseLocalString($(this).text()));
});
$("td[class^='exp_row_kor_']").each(function() {
  myObj.data.expRowKor.push(parseLocalString($(this).text()));
});

$("td[class^='work_row_']").each(function() {
  myObj.data.workRow.push(parseLocalString($(this).text()));
});

// calculate stuff
for (var i = 0; i < myObj.data.incRow.length; i++) {
  var row_a = myObj.data.incRow[i] + myObj.data.incRowKor[i];
  var row_b = myObj.data.expRow[i] + myObj.data.expRowKor[i] +
  myObj.data.workRow[i];
  var calc = row_a - row_b;
  myObj.data.resRow.push(calc);
}
console.log(myObj.data);
// display results
// odd the 'th' here...
$("th[class^='res_row_']").each(function(index,element) {
console.log(index,myObj.data.resRow[index].toFixed(2));
  $(this).text(myObj.data.resRow[index].toFixed(2));
});
table.dataTable {
  width: 100%!important;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
}

.mt-5 {
  margin-top: 2rem!important;
}

.table-bordered {
  border: 0 solid rgba(0, 0, 0, .06);
}

.btn-primary {
  color: #fff!important;
  background-color: #0275d8;
  border-color: #0275d8;
  -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1), -webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  will-change: box-shadow;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: .4rem;
  background-color: transparent;
}

.bg-success {
  background-color: #5cb85c!important;
}

.bg-danger {
  background-color: #d9534f!important;
}

.bg-warning {
  background-color: #f0ad4e!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-bordered dataTable no-footer dtr-inline mt-5 table2excel">
  <thead class="btn-primary bg-primary">
    <tr>
      <th></th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>11</th>
      <th>12</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr class="btn-primary bg-success">
      <td>ROW A Σ</td>
      <td class="inc_row_0">0,00</td>
      <td class="inc_row_1">0,00</td>
      <td class="inc_row_2">0,00</td>
      <td class="inc_row_3">0,00</td>
      <td class="inc_row_4">0,00</td>
      <td class="inc_row_5">0,00</td>
      <td class="inc_row_6">0,00</td>
      <td class="inc_row_7">103 091,99</td>
      <td class="inc_row_8">74 247,97</td>
      <td class="inc_row_9">42 660,39</td>
      <td class="inc_row_10">179 264,64</td>
      <td class="inc_row_11">9 693,49</td>
      <td></td>
    </tr>
    <tr class="btn-primary bg-success">
      <td>ROW A Adjust</td>
      <td class="inc_row_kor_0">0,00</td>
      <td class="inc_row_kor_1">0,00</td>
      <td class="inc_row_kor_2">0,00</td>
      <td class="inc_row_kor_3">0,00</td>
      <td class="inc_row_kor_4">0,00</td>
      <td class="inc_row_kor_5">0,00</td>
      <td class="inc_row_kor_6">0,00</td>
      <td class="inc_row_kor_7">0,00</td>
      <td class="inc_row_kor_8">0,00</td>
      <td class="inc_row_kor_9">0,00</td>
      <td class="inc_row_kor_10">0,00</td>
      <td class="inc_row_kor_11">0,00</td>
      <td></td>
    </tr>

    <tr class="btn-primary bg-danger">
      <td>ROW C</td>
      <td class="exp_row_0">0,00</td>
      <td class="exp_row_1">0,00</td>
      <td class="exp_row_2">0,00</td>
      <td class="exp_row_3">0,00</td>
      <td class="exp_row_4">0,00</td>
      <td class="exp_row_5">387,71</td>
      <td class="exp_row_6">387,71</td>
      <td class="exp_row_7">71 026,92</td>
      <td class="exp_row_8">43 914,10</td>
      <td class="exp_row_9">73 705,35</td>
      <td class="exp_row_10">77 213,29</td>
      <td class="exp_row_11">33,00</td>
      <td></td>
    </tr>

    <tr class="btn-primary bg-danger">
      <td>ROW C Adjust</td>
      <td class="exp_row_kor_0">0,00</td>
      <td class="exp_row_kor_1">0,00</td>
      <td class="exp_row_kor_2">0,00</td>
      <td class="exp_row_kor_3">0,00</td>
      <td class="exp_row_kor_4">0,00</td>
      <td class="exp_row_kor_5">0,00</td>
      <td class="exp_row_kor_6">0,00</td>
      <td class="exp_row_kor_7">0,00</td>
      <td class="exp_row_kor_8">0,00</td>
      <td class="exp_row_kor_9">0,00</td>
      <td class="exp_row_kor_10">0,00</td>
      <td class="exp_row_kor_11">0,00</td>
      <td></td>
    </tr>
    <tr></tr>
  </tbody>
  <tbody>
    <tr class="btn-primary bg-warning">
      <td>ROW D</td>
      <td class="work_row_0">0,00</td>
      <td class="work_row_1">0,00</td>
      <td class="work_row_2">0,00</td>
      <td class="work_row_3">0,00</td>
      <td class="work_row_4">0,00</td>
      <td class="work_row_5">0,00</td>
      <td class="work_row_6">0,00</td>
      <td class="work_row_7">30 788,44</td>
      <td class="work_row_8">27 522,85</td>
      <td class="work_row_9">25 827,27</td>
      <td class="work_row_10">22 443,28</td>
      <td class="work_row_11">-10 000,60</td>
      <td></td>
    </tr>
    <tr></tr>
  </tbody>

  <tbody>
    <tr class="btn-primary bg-primary">
      <td>Calculations ROW</td>
      <th class="res_row_0">x</th>
      <th class="res_row_1"></th>
      <th class="res_row_2"></th>
      <th class="res_row_3"></th>
      <th class="res_row_4"></th>
      <th class="res_row_5"></th>
      <th class="res_row_6"></th>
      <th class="res_row_7"></th>
      <th class="res_row_8"></th>
      <th class="res_row_9"></th>
      <th class="res_row_10"></th>
      <th class="res_row_11"></th>

    </tr>

  </tbody>
</table>
<br>
<ul>
  <li>Calculations ROW for month 1 is : <code>(.inc_row_0 + .inc_row_kor_0) - (.exp_row_0 + .exp_row_kor_0 + .work_row_0)</code></li>
  <li>Calculations ROW for month 2 is : <code>(.inc_row_1 + .inc_row_kor_1) - (.exp_row_1 + .exp_row_kor_1 + .work_row_1)</code></li>
  <li>etc.</li>
</ul>

<br> Basic idea <code>res_row_{n} = (.inc_row_{n} + .inc_row_kor_{n}) - (.exp_row_{n} + .exp_row_kor_{n} + .work_row_{n})</code>

现在，对于这个，我们避免使用全局对象和数组，只需将表“单元格”的值作为每个单元格的数据，并将值插入到末尾。

function parseLocalString(localstring) {
  var strippedstring = localstring.replace(/ /g, '').replace(',', '.');
  var localnumber = parseFloat(strippedstring);
  return localnumber;
}
  
// avoid the fixed 12, just get the stuff
// begins with
$("td[class^='inc_row_']").filter(function() {
  return !$(this).is("td[class^='inc_row_kor_']");
}).each(function() {
  // put it right on the cell
  $(this).data('parsedval', parseLocalString($(this).text()));
});
$("td[class^='inc_row_kor_']").each(function() {
  // put it right on the cell
  $(this).data('parsedval', parseLocalString($(this).text()));
});

$("td[class^='exp_row_']").filter(function() {
  return !$(this).is("td[class^='exp_row_kor_']");
}).each(function() {
  // put it right on the cell
  $(this).data('parsedval', parseLocalString($(this).text()));
});
$("td[class^='exp_row_kor_']").each(function() {
  // put it right on the cell
  $(this).data('parsedval', parseLocalString($(this).text()));
});

$("td[class^='work_row_']").each(function() {
  // put it right on the cell
  $(this).data('parsedval', parseLocalString($(this).text()));
});
// odd th here
$("th[class^='res_row_']").each(function(index, elem) {
  var row_a = $("td[class^='inc_row_']").eq(index).data('parsedval') + $("td[class^='inc_row_kor_']").eq(index).data('parsedval') * 1;
  // get from the cells
  var row_b = $("td[class^='exp_row_']").eq(index).data('parsedval') + $("td[class^='exp_row_kor']").eq(index).data('parsedval') + $("td[class^='work_row_']").eq(index).data('parsedval') * 1;
  var calc = row_a - row_b;
  console.log(index,calc.toFixed(2));
  $(elem).data('parsedval', calc.toFixed(2));
  $(elem).text(calc.toFixed(2));
});
table.dataTable {
  width: 100%!important;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
}

.mt-5 {
  margin-top: 2rem!important;
}

.table-bordered {
  border: 0 solid rgba(0, 0, 0, .06);
}

.btn-primary {
  color: #fff!important;
  background-color: #0275d8;
  border-color: #0275d8;
  -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1), -webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  will-change: box-shadow;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: .4rem;
  background-color: transparent;
}

.bg-success {
  background-color: #5cb85c!important;
}

.bg-danger {
  background-color: #d9534f!important;
}

.bg-warning {
  background-color: #f0ad4e!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-bordered dataTable no-footer dtr-inline mt-5 table2excel">
  <thead class="btn-primary bg-primary">
    <tr>
      <th></th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>11</th>
      <th>12</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr class="btn-primary bg-success">
      <td>ROW A Σ</td>
      <td class="inc_row_0">0,00</td>
      <td class="inc_row_1">0,00</td>
      <td class="inc_row_2">0,00</td>
      <td class="inc_row_3">0,00</td>
      <td class="inc_row_4">0,00</td>
      <td class="inc_row_5">0,00</td>
      <td class="inc_row_6">0,00</td>
      <td class="inc_row_7">103 091,99</td>
      <td class="inc_row_8">74 247,97</td>
      <td class="inc_row_9">42 660,39</td>
      <td class="inc_row_10">179 264,64</td>
      <td class="inc_row_11">9 693,49</td>
      <td></td>
    </tr>
    <tr class="btn-primary bg-success">
      <td>ROW A Adjust</td>
      <td class="inc_row_kor_0">0,00</td>
      <td class="inc_row_kor_1">0,00</td>
      <td class="inc_row_kor_2">0,00</td>
      <td class="inc_row_kor_3">0,00</td>
      <td class="inc_row_kor_4">0,00</td>
      <td class="inc_row_kor_5">0,00</td>
      <td class="inc_row_kor_6">0,00</td>
      <td class="inc_row_kor_7">0,00</td>
      <td class="inc_row_kor_8">0,00</td>
      <td class="inc_row_kor_9">0,00</td>
      <td class="inc_row_kor_10">0,00</td>
      <td class="inc_row_kor_11">0,00</td>
      <td></td>
    </tr>

    <tr class="btn-primary bg-danger">
      <td>ROW C</td>
      <td class="exp_row_0">0,00</td>
      <td class="exp_row_1">0,00</td>
      <td class="exp_row_2">0,00</td>
      <td class="exp_row_3">0,00</td>
      <td class="exp_row_4">0,00</td>
      <td class="exp_row_5">387,71</td>
      <td class="exp_row_6">387,71</td>
      <td class="exp_row_7">71 026,92</td>
      <td class="exp_row_8">43 914,10</td>
      <td class="exp_row_9">73 705,35</td>
      <td class="exp_row_10">77 213,29</td>
      <td class="exp_row_11">33,00</td>
      <td></td>
    </tr>

    <tr class="btn-primary bg-danger">
      <td>ROW C Adjust</td>
      <td class="exp_row_kor_0">0,00</td>
      <td class="exp_row_kor_1">0,00</td>
      <td class="exp_row_kor_2">0,00</td>
      <td class="exp_row_kor_3">0,00</td>
      <td class="exp_row_kor_4">0,00</td>
      <td class="exp_row_kor_5">0,00</td>
      <td class="exp_row_kor_6">0,00</td>
      <td class="exp_row_kor_7">0,00</td>
      <td class="exp_row_kor_8">0,00</td>
      <td class="exp_row_kor_9">0,00</td>
      <td class="exp_row_kor_10">0,00</td>
      <td class="exp_row_kor_11">0,00</td>
      <td></td>
    </tr>
    <tr></tr>
  </tbody>
  <tbody>
    <tr class="btn-primary bg-warning">
      <td>ROW D</td>
      <td class="work_row_0">0,00</td>
      <td class="work_row_1">0,00</td>
      <td class="work_row_2">0,00</td>
      <td class="work_row_3">0,00</td>
      <td class="work_row_4">0,00</td>
      <td class="work_row_5">0,00</td>
      <td class="work_row_6">0,00</td>
      <td class="work_row_7">30 788,44</td>
      <td class="work_row_8">27 522,85</td>
      <td class="work_row_9">25 827,27</td>
      <td class="work_row_10">22 443,28</td>
      <td class="work_row_11">-10 000,60</td>
      <td></td>
    </tr>
    <tr></tr>
  </tbody>

  <tbody>
    <tr class="btn-primary bg-primary">
      <td>Calculations ROW</td>
      <th class="res_row_0">x</th>
      <th class="res_row_1"></th>
      <th class="res_row_2"></th>
      <th class="res_row_3"></th>
      <th class="res_row_4"></th>
      <th class="res_row_5"></th>
      <th class="res_row_6"></th>
      <th class="res_row_7"></th>
      <th class="res_row_8"></th>
      <th class="res_row_9"></th>
      <th class="res_row_10"></th>
      <th class="res_row_11"></th>

    </tr>

  </tbody>
</table>
<br>
<ul>
  <li>Calculations ROW for month 1 is : <code>(.inc_row_0 + .inc_row_kor_0) - (.exp_row_0 + .exp_row_kor_0 + .work_row_0)</code></li>
  <li>Calculations ROW for month 2 is : <code>(.inc_row_1 + .inc_row_kor_1) - (.exp_row_1 + .exp_row_kor_1 + .work_row_1)</code></li>
  <li>etc.</li>
</ul>

<br> Basic idea <code>res_row_{n} = (.inc_row_{n} + .inc_row_kor_{n}) - (.exp_row_{n} + .exp_row_kor_{n} + .work_row_{n})</code>

看这里!好的，我们已经取得了进展，所以让我们使用更简单的单个类来合并代码并使用它并使其在此过程中更快。

function parseLocalString(localstring) {
  var strippedstring = localstring.replace(/ /g, '').replace(',', '.');
  var localnumber = parseFloat(strippedstring);
  return localnumber;
}

// NO MORE begins with, easier using groups by row

$(".inc_row")
  .add(".inc_row_kor")
  .add(".exp_row")
  .add(".exp_row_kor")
  .add(".work_row")
  .find('.rowdata').each(function() {
    // put it right on the cell
    $(this).data('parsedval', parseLocalString($(this).text()));
  });

// odd th here
$(".res_row").find('.rowdata').each(function(index, elem) {
  var row_a = $(".inc_row").find('.rowdata').eq(index).data('parsedval') + $(".inc_row_kor").find('.rowdata').eq(index).data('parsedval') * 1;
  // get from the cells
  var row_b = $(".exp_row").find('.rowdata').eq(index).data('parsedval') + $(".exp_row_kor").find('.rowdata').eq(index).data('parsedval') +$(".work_row").find('.rowdata').eq(index).data('parsedval') * 1;
  var calc = row_a - row_b;
  console.log(index, calc.toFixed(2));
  $(elem).data('parsedval', calc.toFixed(2));
  $(elem).text(calc.toFixed(2));
});
table.dataTable {
  width: 100%!important;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
}

.mt-5 {
  margin-top: 2rem!important;
}

.table-bordered {
  border: 0 solid rgba(0, 0, 0, .06);
}

.btn-primary {
  color: #fff!important;
  background-color: #0275d8;
  border-color: #0275d8;
  -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1), -webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  will-change: box-shadow;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: .4rem;
  background-color: transparent;
}

.bg-success {
  background-color: #5cb85c!important;
}

.bg-danger {
  background-color: #d9534f!important;
}

.bg-warning {
  background-color: #f0ad4e!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-bordered dataTable no-footer dtr-inline mt-5 table2excel">
  <thead class="btn-primary bg-primary">
    <tr>
      <th></th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>11</th>
      <th>12</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr class="btn-primary bg-success inc_row">
      <td>ROW A Σ</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">103 091,99</td>
      <td class="rowdata">74 247,97</td>
      <td class="rowdata">42 660,39</td>
      <td class="rowdata">179 264,64</td>
      <td class="rowdata">9 693,49</td>
      <td></td>
    </tr>
    <tr class="btn-primary bg-success inc_row_kor">
      <td>ROW A Adjust</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td></td>
    </tr>

    <tr class="btn-primary bg-danger exp_row">
      <td>ROW C</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">387,71</td>
      <td class="rowdata">387,71</td>
      <td class="rowdata">71 026,92</td>
      <td class="rowdata">43 914,10</td>
      <td class="rowdata">73 705,35</td>
      <td class="rowdata">77 213,29</td>
      <td class="rowdata">33,00</td>
      <td></td>
    </tr>

    <tr class="btn-primary bg-danger exp_row_kor">
      <td>ROW C Adjust</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td></td>
    </tr>
    <tr></tr>
  </tbody>
  <tbody>
    <tr class="btn-primary bg-warning work_row">
      <td>ROW D</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">0,00</td>
      <td class="rowdata">30 788,44</td>
      <td class="rowdata">27 522,85</td>
      <td class="rowdata">25 827,27</td>
      <td class="rowdata">22 443,28</td>
      <td class="rowdata">-10 000,60</td>
      <td></td>
    </tr>
    <tr></tr>
  </tbody>

  <tbody>
    <tr class="btn-primary bg-primary res_row">
      <td>Calculations ROW</td>
      <th class="rowdata">x</th>
      <th class="rowdata"></th>
      <th class="rowdata"></th>
      <th class="rowdata"></th>
      <th class="rowdata"></th>
      <th class="rowdata"></th>
      <th class="rowdata"></th>
      <th class="rowdata"></th>
      <th class="rowdata"></th>
      <th class="rowdata"></th>
      <th class="rowdata"></th>
      <th class="rowdata"></th>
    </tr>
  </tbody>
</table>
<br>
<ul>
  <li>Calculations ROW for month 1 is : <code>(.inc_row_0 + .inc_row_kor_0) - (.exp_row_0 + .exp_row_kor_0 + .work_row_0)</code></li>
  <li>Calculations ROW for month 2 is : <code>(.inc_row_1 + .inc_row_kor_1) - (.exp_row_1 + .exp_row_kor_1 + .work_row_1)</code></li>
  <li>etc.</li>
</ul>

<br> Basic idea <code>res_row_{n} = (.inc_row_{n} + .inc_row_kor_{n}) - (.exp_row_{n} + .exp_row_kor_{n} + .work_row_{n})</code>

关于javascript - Jquery表行计算，多行/列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47927807/

上一篇：javascript - 如何在$.ajax方法的success属性中访问对象的元素？

下一篇：javascript - 验证数组中是否存在元素

相关文章：

javascript - jQuery 错误 : missing ( before formal parameters

jquery 插件正确应用于悬停但不适用于隐藏元素

javascript - 如何将 GET 请求转换为 POST

jQuery 倒计时 Keith Wood 无法在 mozilla 中工作

jQuery 单击流程上的事件以从表中添加/删除行

javascript - 我怎样才能让 JavaScript 代码执行等到带有脚本的 AJAX 请求被加载和执行？

javascript - JQuery - 将 div 动画化为鼠标坐标

javascript - 为什么 element.style.left 返回 NaN？

javascript - HTML5 视频 - 以编程方式显示/隐藏控件

使用高度 % 时的 jQuery slideToggle 问题

©2024 IT工具网  联系我们