我有一张桌子,第一排代表几个月。接下来是价值观。我不想介绍聚合/行计算方法并将其显示在最后一行。由于行数和列数, 我不太确定从哪里开始 ,而不是重复代码。 因此我正在寻找一些提示开始。
我为你准备了一个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));
}
答案 0 :(得分:0)
这些取决于行单元格数量与所选择的相等。 整个&#34;从选择器开始#34;对于每个&#34;组&#34;单一班级会更好项目,使选择器更简单,更快速,更容易维护,但我不负责你的布局,只是一个建议。
首先,这是一个非常详细的选项,用于说明如何使用一组包含数据的数组。这可能会随着表的更改而出现问题,或者如果其中一个表&#34; row&#34;事情缺失或有额外的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));
});
&#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;
现在,对于这个,我们避开全局对象和数组,只需要放置表格的值&#34; cells&#34;作为每个数据的数据,在最后插入值。
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;
在这里查看!好的,我们已经取得了进展,所以让我们更简单地使用单个类来整合代码并使用它,并在此过程中加快速度。
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;
答案 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());
});