Add new row in table using jquery in reactjs - html

Question

I'm want to add new row using jquery any one help me to solve my problem"
'''
https://jsfiddle.net/dn6chabs/86/
jsfiddle here want to add new row
'''

Answer 1

So, there were quite a few issues with your code:
If you check console by hitting f12 you have this error Uncaught ReferenceError: $c is not defined because of this line: $("#field7").val($c);
I don't think it's necessary for the add and remove to be <a> tags, unless you want them specifically for styling, as it confuses the matter
$(this).parent().parent().remove(); this line doesn't really appear to do anything
Anyway, here's the corrected code!
$("#field7").val(c);, this has been corrected
The add and remove have been made <span> tags with custom styling to look like <a> tags
The onclick event has been corrected in light of this
The removal process has been fixed and is now $('#table').children().eq($("#table").children().length - 1).not('tfoot').remove();, whereby it never removes the subtotal / total line
$(document).ready(function() {
$("#add_to_table").on('click', function() {
navObj = $("#table tbody:last").clone();
$("#table").append(navObj);
});
$("#remove_from_table").on('click', function() {
$('#table').children().eq($("#table").children().length - 1).not('tfoot').remove();
});
});
$(document).ready(function() {
var a = document.getElementById("field5").innerHTML;
var b = document.getElementById("field6").InnerHTML;
c = a * b;
$("#field7").val(c);
});
.link {
text-decoration: underline;
color: blue;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="add_to_table" class="link">Add</span>
<span id="remove_from_table" class="link">Remove</span>
<table id="table" style="width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; border: 0px;" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr id="row">
<th scope="row" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">#</th>
<th scope="row" class="text-left" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">DESCRIPTION</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">UNITS</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">PRICE</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td id="field1" class="no" style="color: #fff; font-size: 1.6em; background: #3989c6;">01</td>
<td id="field2" class="text-left" style="padding: 15px; background: #eee; border-bottom: 1px solid #fff;">
<h3 id="field3">WebSite <em><strong>Consultansy</strong></em></h3>
<em id="field4">Tasks related to meeting minutes AbC</em>
</td>
<td id="field5" class="qty" style="padding: 15px; background: #eee; border-bottom: 1px solid #fff;">4</td>
<td id="field6" class="unit" style="background: #ddd;">$100.00</td>
<td id="field7" class="total" style="background: #3989c6; color: #fff;">$300.00</td>
<td>
</td>
</tr>
</tbody>
<tfoot style="display: table-footer-group; vertical-align: middle; border-color: inherit;">
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;" colspan="2">SUBTOTAL</td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;">$300.00</td>
</tr>
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;" colspan="2"><em>TAX Deductions</em></td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;">00.00</td>
</tr>
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="color: #3989c6; font-size: 1.4em; border-top: 1px solid #3989c6;" colspan="2">GRAND TOTAL</td>
<td style="color: #3989c6; font-size: 1.4em; border-top: 1px solid #3989c6;">$300.00</td>
</tr>
</tfoot>
</table>
Check the fiddle: JSFiddle
Let me know how you get on!