1. 首頁
  2. 問答
  3. 和表格中列的所有ROW [HTML，JavaScript的]

和表格中列的所有ROW [HTML，JavaScript的]

2016-07-27 23 views
0

所以我有這樣的代碼來生成發票：和表格中列的所有ROW [HTML，JavaScript的]

.table-data_2{   
 
     padding: 0; 
 
     margin: 0 auto 1.5em auto; 
 
    border-top: 0px solid #C1DAD7; 
 
     border-left: 0px solid #C1DAD7; 
 
     border-collapse:collapse; 
 
    font-size:12px; 
 
     font-family: verdana,arial,sans-serif; 
 
     color:#545454; 
 
    border: 0; 
 
} 
 
.td-data_1 { 
 
\t font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
 
\t border-right: 1px solid #C1DAD7; 
 
\t border-bottom: 1px solid #C1DAD7; 
 
\t padding: 3px 6px 3px 6px; 
 
\t color: #4f6b72; 
 
\t border: 2; 
 
\t text-align: left; 
 
}
<table class="table-data_2" id="tbl_po"> 
 
    <tr> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=30><font size="2dp"><div align="center">NO </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="center"> Q-Code </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=450><font size="2dp"><div align="center"> Name, Spec, Size </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="right"> QTY </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="center"> Unit </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="center"> Currency </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="right"> Unit Price </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="right"> Total Price </div></font></td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td align="center"><font size="2dp"> 1 </font></td> 
 
    <td align="left"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="right"><font size="2dp"> 2 </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="right"><font size="2dp"> 12000 </font></td> 
 
    <td align="right" class="total_price"><font size="2dp"> 24000 </font></td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td align="center"><font size="2dp"> 1 </font></td> 
 
    <td align="left"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="right"><font size="2dp"> 2 </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="right"><font size="2dp"> 14000 </font></td> 
 
    <td align="right" class="total_price"><font size="2dp"> 28000 </font></td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td colspan='7' class='text-right'>Sub total</td> 
 
    <td class="sub_total">SUM TOTAL PRICE</td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td colspan='7' class='text-right'>VAT</td> 
 
    <td class='text-right'>10%</td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td colspan='7' class='text-right'><b>TOTAL</b></td> 
 
    <td class='text-right'><b>TOTAL + VAT</b></td> 
 
    </tr> 
 

 
</table>

我想要生成所示子總總價的我表（不是從MySQL數據庫），以及如何從子總+增值生成價值？

任何幫助將不勝感激。

感謝，

來源

2016-07-27 M Ansyori

+0

'var total = 0; $（'＃tbl_po .total_price'）。each（function（）{total + = + $（this）.text（）。trim（）|| 0;}）;' – Tushar

+0

@tushar能寫出完整的代碼嗎？我是JavaScript新手，謝謝。 –

+0

請勿使用''標籤。它在1997年被HTML 4描述，HTML 5不支持 –

回答

1

試試這個：

$('document').ready(function() { 
 
    var ttl = 0; 
 
    $.each($('td.total_price'), function(key, value) { 
 
    ttl += parseInt($(value).text()) || 0; 
 
    }); 
 
    
 
    var vat = 10; 
 
    var cVat = (ttl * vat)/100; 
 
    
 
    $('td.sub_total').html('<strong>' + ttl + '</strong>'); 
 
    $('td.vat').html('<strong>' + cVat + '</strong>'); 
 
    $('td.total').html('<strong>' + (ttl + cVat) + '</strong>'); 
 
});
.table-data_2{   
 
     padding: 0; 
 
     margin: 0 auto 1.5em auto; 
 
    border-top: 0px solid #C1DAD7; 
 
     border-left: 0px solid #C1DAD7; 
 
     border-collapse:collapse; 
 
    font-size:12px; 
 
     font-family: verdana,arial,sans-serif; 
 
     color:#545454; 
 
    border: 0; 
 
} 
 
.td-data_1 { 
 
\t font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
 
\t border-right: 1px solid #C1DAD7; 
 
\t border-bottom: 1px solid #C1DAD7; 
 
\t padding: 3px 6px 3px 6px; 
 
\t color: #4f6b72; 
 
\t border: 2; 
 
\t text-align: left; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table-data_2" id="tbl_po"> 
 
    <tr> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=30><font size="2dp"><div align="center">NO </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="center"> Q-Code </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=450><font size="2dp"><div align="center"> Name, Spec, Size </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="right"> QTY </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="center"> Unit </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=50><font size="2dp"><div align="center"> Currency </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="right"> Unit Price </div></font></td> 
 
    <td bgcolor="#8eb4e3" class="td-data_1" width=80><font size="2dp"><div align="right"> Total Price </div></font></td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td align="center"><font size="2dp"> 1 </font></td> 
 
    <td align="left"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="right"><font size="2dp"> 2 </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="right"><font size="2dp"> 12000 </font></td> 
 
    <td align="right" class="total_price"><font size="2dp"> 24000 </font></td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td align="center"><font size="2dp"> 1 </font></td> 
 
    <td align="left"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="right"><font size="2dp"> 2 </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="center"><font size="2dp"> Data Not Shown </font></td> 
 
    <td align="right"><font size="2dp"> 14000 </font></td> 
 
    <td align="right" class="total_price"><font size="2dp"> 28000 </font></td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td colspan='7' class='text-right'>Sub total</td> 
 
    <td class="sub_total">SUM TOTAL PRICE</td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td colspan='7' class='text-right'>VAT</td> 
 
    <td class='text-right vat'>10%</td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td colspan='7' class='text-right'><b>TOTAL</b></td> 
 
    <td class='text-right total'><b>TOTAL + VAT</b></td> 
 
    </tr> 
 

 
</table>

來源

2016-07-27 04:41:47

+0

謝謝你，它工作！ –

+0

很高興幫助你花花公子:) @MAnsyori –

2

這將是

$(document).ready(function() { 
    var sumSubTotal = 0; 
    $('.total_price').each(function() { 
     sumSubTotal += parseInt($(this).text().trim(), 10) || 0; 
    }); 
    $("td:contains('SUM TOTAL')").text(sumSubTotal); 
    $("td:contains('10%')").text(sumSubTotal*0.1); 
    $("td:contains('TOTAL + VAT')").text((sumSubTotal*0.1)+sumSubTotal); 

});

例

https://jsfiddle.net/zzzrdcr5/1/

來源

2016-07-27 04:57:30

+0

我更喜歡這個，因爲正確使用'parseInt'和'radix'參數。 –

相關問題

 相關問題