Here’s what the code should look like:
var numberofRowsforItems = 0;
function addRow() {
numberofRowsforItems++;
var htmlforItemTable = '<tr class="" id="'+ numberofRowsforItems +'" data-row="1"><td class="tablerow"><span style="color:White">Hello</span></td ><td colspan="2"> <div><button id="table_q_btn">-</button> <input type="text"/><button id="table_q_btn">+</button> </div> </td >'
+ '<td><input type="text" value="Hellos" id="HelloID"/></td><td><input type="text" value="Hello" disabled/></td>'
+ '<td><input type="text" value="Hello"/></td><td><input type="text"/></td><td><span style="color:White">Hasd</span></td><td><span style="color:White">qdasd</span></td><td><button class="remove">-</button><button class="getId">Id</button></td></tr >';
$('#Item_table_data').append(htmlforItemTable);
}
$(document).on('click', '.getId', function () {
var a = $(this).closest('tr').attr('id');
alert(a);
});
What I’ve changed is: id="'+ numberofRowsforItems +'" and: $(this).closest('tr').attr('id');
I am facing some issues related to creating an dynamic table. I append rows through jquery on onchange event . My issue is i want to find row Index of each rows in table how can i get this id using jquery?
Any body who can help me?
This is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="assets/js/libs/jquery-3.5.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
<button id="btn" onclick="addRow()">Add Row</button>
<table id="Items_table" border="1">
<thead>
<tr>
<th>Item Name</th>
<th colspan="2">Quantity</th>
<th>Purchase Price</th>
<th>Tax%</th>
<th>Tax Amount</th>
<th>Discount</th>
<th>Unit Cost</th>
<th>Total Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody id="Item_table_data">
</tbody>
</table>
<script>
var numberofRowsforItems = 0;
function addRow() {
numberofRowsforItems++;
var htmlforItemTable = '<tr class="" id=" " data-row="1"><td class="tablerow"><span style="color:White">Hello</span></td ><td colspan="2"> <div><button id="table_q_btn">-</button> <input type="text"/><button id="table_q_btn">+</button> </div> </td >'
+ '<td><input type="text" value="Hellos" id="HelloID"/></td><td><input type="text" value="Hello" disabled/></td>'
+ '<td><input type="text" value="Hello"/></td><td><input type="text"/></td><td><span style="color:White">Hasd</span></td><td><span style="color:White">qdasd</span></td><td><button class="remove">-</button><button class="getId">Id</button></td></tr >';
$('#Item_table_data').append(htmlforItemTable);
}
$(document).on('click', '.getId', function () {
var a = $(this).closest('tr').find('.tablerow').val();
alert(a);
var b = $(this).val();
alert(b);
});
$(document).on('click', '.remove', function () {
$(this).parents('tr').remove();
});
</script>
</body>
</html>
I want to append this dynamic row in table and now i want to get every row index through jquery or javascript
