#javascript #php #foreach
#javascript #php #для каждого
Вопрос:
У меня есть результат запроса в PHP и с использованием цикла foreach, показывающий результат путем генерации нового tr в html-таблице, но в то же время внутри цикла будет вычислено некоторое значение, которое я хочу показать с помощью Javascript, добавив несколько строк
Как я могу это сделать?
PHP:
<tbody>
<?php
$gTotalBorn = 0;
$gTotalSanc = 0;
$bTotalBorn = 0;
$bTotalSanc = 0;
foreach ($reNominalRoll as $key => $value) {
if ($row_area->ADMIN_ID == $value->AREA_ID) {
$gTotalBorn = $value->Borne;
$gTotalSanc = $value->sanction;
?>
<tr class="allrow">
<td><?php echo $value->Rank ?></td>
<td><?php echo $value->Part ?></td>
<td><?php echo $value->sanction;
$bTotalSanc = $value->sanction; ?></td>
<td><?php echo $value->Borne;
$bTotalBorn = $value->Borne; ?></td>
<td><?php echo $value->TotalIn ?></td>
<td><?php echo $value->TotalOut ?></td>
</tr>
<?php
}
}
}
?>
<!--Grand Total Row-->
<tr>
<td style="text-align: center; font-weight: bold;" colspan="5">Grand Total</td>
<td style="text-align: center; font-weight: bold;"><?php echo $gTotalSanc; ?></td>
<td style="text-align: center; font-weight: bold;"><?php echo $gTotalBorn; ?></td>
<td></td>
<td></td>
</tr>
</tbody>
Javascript:
if (allrow.hasClass('expectedRow')) {
$('.expectedRow').each(function () {
let thisRow = $(this);
let prevShip = thisRow.prevAll('.ships:first');
let prevUnit = thisRow.prevAll('.units:first');
let prevBranch = thisRow.prevAll('.units:first');
//thisRow.after('<tr><td colspan="6"><strong>Branch Total</strong></td></tr>');
thisRow.after('<tr>'
'<td><strong>Branch Total</strong></td>'
'<td></td>'
'<td><strong>' "<?php echo $bTotalSanc; $bTotalSanc = 0;?>" '</strong></td>'
'<td><strong>' "<?php echo $bTotalBorn; $bTotalBorn = 0;?>" '</strong></td>'
'<td></td>'
'<td></td>'
'</tr>');
// below conditions for identify the unit based on rowspan length
if (prevUnit.find('td[rowspan]').length == 2) {
// ship rowspan incremented by 1
let prevShipRowspan = parseInt(prevShip.find('td:first').attr('rowspan'));
let newPrevShipRowspan = prevShipRowspan 1;
prevShip.find('td:first').attr('rowspan',newPrevShipRowspan);
// unit rowspan incremented by 1
let unitRowspan = parseInt(prevUnit.find('td:first').attr('rowspan'));
let newUnitRowspan = unitRowspan 1;
prevUnit.find('td:first').attr('rowspan',newUnitRowspan);
// branch rowspan incremented by 1
let branchRowspan = parseInt(prevUnit.find('td:eq(1)').attr('rowspan'));
let newBranchRowspan = branchRowspan 1;
prevBranch.find('td:eq(1)').attr('rowspan',newBranchRowspan);
}
else if (prevUnit.find('td[rowspan]').length == 3) {
// ship rowspan incremented by 1
let prevShipRowspan = parseInt(prevShip.find('td:first').attr('rowspan'));
let newPrevShipRowspan = prevShipRowspan 1;
prevShip.find('td:first').attr('rowspan',newPrevShipRowspan);
// unit rowspan incremented by 1
let unitRowspan = parseInt(prevUnit.find('td:eq(1)').attr('rowspan'));
let newUnitRowspan = unitRowspan 1;
prevUnit.find('td:eq(1)').attr('rowspan',newUnitRowspan);
// branch rowspan incremented by 1
let branchRowspan = parseInt(prevBranch.find('td:eq(2)').attr('rowspan'));
let newBranchRowspan = branchRowspan 1;
prevBranch.find('td:eq(2)').attr('rowspan',newBranchRowspan);
}
});
}
В приведенном выше коде, как добавить $bTotalBorn и $bTotalSanc значение add в javascript, но не total, при этом значение цикла синхронно будет обновляться в javascript
Теперь отображается общий итог, подобный этому, но необходимо показать промежуточный итог 
Кто-нибудь может мне помочь?
Комментарии:
1. вы хотите суммировать $ bTotalBorn $ bTotalSanc?
2. @MohammedYassineCHABLI Я обновил вопрос
3. какое ожидаемое значение вы должны получить из приведенной выше таблицы?
4. Возможно, сохранение каждого промежуточного итога в массиве в PHP, а в JS доступ к желаемому промежуточному итогу в функции текущей итерации (первый аргумент
.each()).5. И почему вы не создали свои промежуточные итоговые строки тоже на PHP?
Ответ №1:
Ниже пример того, что, я думаю, вы пытаетесь сделать.
Я создал пример без PHP, чтобы фрагмент кода работал.
- Строки таблицы генерируются в середине HTML для максимально возможного соответствия тому, что вы сделали в PHP.
- Промежуточные ячейки генерируются в Javascript, как в вашем сообщении.
Мой фрагмент приведен здесь только для того, чтобы дать вам начальное решение вашей проблемы. Я сделал это в зависимости от того, как вы хотели бы сделать (я в основном думаю о «со значением цикла синхронно будет обновляться в javascript«, поэтому используйте переменные PHP в JS, если я прав).
$(document).ready(() => {
$('table > tbody > tr').each((i, tr) => {
const subtotalCellHtml = `<td>${subtotalsA[i]}</td><td>${subtotalsB[i]}</td>`;
$(tr).append(subtotalCellHtml);
});
}); table {
border-collapse: collapse;
}
table td,
table th {
border: 1px solid #000;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Values A</th>
<th>Values B</th>
<th>Total A</th>
<th>Total B</th>
</tr>
</thead>
<tbody>
<!-- generated <tr> -->
<!-- below a <script> for imitating your PHP -->
<script>
/*
The code below is in Javascript but should look like your PHP.
I placed this code part here because your PHP is in the middle your HTML,
I tried to have something similar of your post.
*/
/** @var {array.<array>} Test values. */
const valuesA = [[
4, 5, 9, 1
], [
2, 1, 8, 11
]];
const valuesB = [[
1, 2, 1, 1
], [
3, 1, 1, 1, 2
]];
/** @var {array.<number>} List of subtotalsA. */
let subtotalsA = [],
/** @var {array.<number>} List of subtotalsB. */
subtotalsB = [],
/** @var {number} Total of all valuesA. */
totalA = 0,
/** @var {number} Total of all valuesB. */
totalB = 0;
$(document).ready(() => {
for (let i in valuesA) {
// Line below is the same as looping through valuesA[i] and incrementing a var.
const sumA = valuesA[i].reduce((acc, e) => (acc e));
// Same for valuesB[i]
const sumB = valuesB[i].reduce((acc, e) => (acc e));
subtotalsA.push(sumA);
totalA = sumA;
subtotalsB.push(sumB);
totalB = sumB;
// Building table rows without subtotal like in your PHP.
const rowHtml = `<tr>
<td>${valuesA[i].join(', ')}</td>
<td>${valuesB[i].join(', ')}</td>
</tr>`;
$('table > tbody').append(rowHtml);
}
});
</script>
</tbody>
<tfoot>
<tr>
<th colspan="2">Grand Total</th>
<!-- generated <th> -->
<script>
$(document).ready(() => {
const totalCellHtml = `<th>${totalA}</th><th>${totalB}</th>`;
$('table > tfoot > tr').append(totalCellHtml);
});
</script>
</tr>
</tfoot>
</table> Если мой ответ не исправляет вашу проблему (или не помогает вам), пожалуйста, скажите мне, возможно, я неправильно понял, в чем была ваша проблема.