如何从表格的最后一行获取输入类型文本的值

Question

I have a table in my page and i have input type text in each row, one of them is for srno I want to get the value of srno text box from the last row of the table using JavaScript.

Here's a code snippet with my HTML:

 <table id="vattable" class="table table-sm table-striped"> <thead class="thead-light"> <tr> <th style="width:50px">SRNo</th> </tr> </thead> <tbody> <tr> <td><input type="text" class="text-control input-sm" readonly name="srno[]" id="srno" value=1 style="text-align:right;max-width:40px;" maxlength="13" /></td> </tr> </tbody> </table>

Actually I am adding rows on button click event in JavaScript, I want to get the last value of srno column and give the next srno with +1 each time the row is created in the table. when the page is loaded I am selecting data from database and fetching in this table so sometime this table may have few rows already and when I click button to create row it should take the last srno and add +1 to the new row srno.

Answer 1

I think that this should work for you if you have a similar HTML structure.

What it basically does is:

1. Scanning the table structure for all inputs with name=srno .
2. Getting the last input and logging in the javascript console.
3. You can get its value with lastInput.value .

 function getLastInput() { //get all inputs with name srno in an array const allInputs = document.querySelectorAll('table tr input[name="srno[]"]'); //get the last input from the array by referring the highest index of the array const lastInput = allInputs[allInputs.length - 1]; return lastInput; } $(document).ready(function() { var rowcnt = $('#vattable tr').length; var count = rowcnt; $(document).on('click', '#addrow', function() { count = count + 1; var html_code = ''; html_code += '<tr id="row_id_' + count + '">'; html_code += '<td><input type="text" class="text-control input-sm" name="srno[]" id="srno" readonly style="text-align:right;width:40px" value="' + count + '"/></td>'; html_code += '</tr>'; $('#vattable').append(html_code); console.log(getLastInput()); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="vattable"> <tr> <td> <input type="text" name="srno[]" value="1" /> </td> </tr> <tr> <td> <input type="text" name="srno[]" value="2" /> </td> </tr> <tr> <td> <input type="text" name="srno[]" value="3" /> </td> </tr> <tr> <td> <input type="text" name="srno[]" value="4" /> </td> </tr> </table> <button id="addrow">Add row</button>

EDIT:

Use this if your input name is srno[] .

//get all inputs with name srno[] in an array
const allInputs = document.querySelectorAll('table tr input[name="srno[]"]');
//get the last input from the array by referring the highest index of the array
const lastInput = allInputs[allInputs.length - 1];
console.log(lastInput);