Jquery表行计算,多行/列

时间:2017-12-21 15:13:59

标签: javascript jquery

我有一张桌子,第一排代表几个月。接下来是价值观。我不想介绍聚合/行计算方法并将其显示在最后一行。由于行数和列数, 我不太确定从哪里开始 ,而不是重复代码。 因此我正在寻找一些提示开始

我为你准备了一个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>

我的尝试:(首先必须将文本规范化为浮点数)

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

2 个答案:

答案 0 :(得分:0)

这些取决于行单元格数量与所选择的相等。 整个&#34;从选择器开始#34;对于每个&#34;组&#34;单一班级会更好项目,使选择器更简单,更快速,更容易维护,但我不负责你的布局,只是一个建议。

首先,这是一个非常详细的选项,用于说明如何使用一组包含数据的数组。这可能会随着表的更改而出现问题,或者如果其中一个表&#34; row&#34;事情缺失或有额外的td可能不是很好。

&#13;
&#13;
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));
});
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

现在,对于这个,我们避开全局对象和数组,只需要放置表格的值&#34; cells&#34;作为每个数据的数据,在最后插入值。

&#13;
&#13;
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));
});
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

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

&#13;
&#13;
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));
});
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

使用<tr>的ID(动态)

首先,您需要知道要使用哪一行,为每个行添加一个ID:
<tr class="btn-primary bg-success" id="inc_tr">
之后,您可以使用jQuery .each()函数(使用$(this)来处理每个<td>):

$("tr#inc_tr").each(function(trIndex) {
  $("td", this).each(function(tdIndex) {
    console.log($(this).text());
  });
});

并且不要忘记删除第一个(或#34;标题&#34;)。

<小时/> 使用<td> s id / class(静态)循环

你也可以使用循环。只需要在每个<td>的id后使其与索引一起使用,但您需要一个静态值:

for(var id = 0; id<=11; id++){
    console.log($(".inc_row_"+id).text());
}

由于它们是唯一标记,如果您使用id,而不是class,则会更好:

<td id="inc_row_0">0,00</td>

循环:

for(var id = 0; id<=11; id++){
    console.log($("#inc_row_"+id).text());
}

使用列

在这里你可以使用类,但我建议你为列中的每个单元格设置相同的类:

<tr class="btn-primary bg-success">
  <td>ROW A Σ</td>
  <td class="inc_col_0">0,00</td>
    ...
<tr class="btn-primary bg-success">
  <td>ROW A Adjust</td>
  <td class="inc_col_0">0,00</td>

现在,您可以再次执行.each()功能,并搜索<tr>的课程:

$("tr").each(function( indexTr ) {
  console.log($(this).find('td.inc_col_0').text());
});

或者,你可以试试:eq(),这个会返回第(x + 1)列。第二列的示例:

$("tr").each(function( indexTr ) {
  console.log($(this).find('td:eq(1)').text());
});
相关问题