如何使用jQuery检索名称列表属性（html）中的数据？

Question

I am trying to retrieve the list of names from the inputs through jQuery. Could anyone advise how I can do it?

The following inputs for example:

Henry | 25 | Financial Advisor
Eric  | 28 | Chemistry Professor
Lance | 30 | Database Administrator

How can I retrieve the names Henry, Eric, Lance using jQuery and the name[ ] attribute?

HTML

<div id="wrapper">
<div id="form_div">
 <form method="post" action="store_employee.php">
  <table id="employee_table" align=center>
   <tr id="row1">
    <td><input type="text" name="name[]" placeholder="Enter Name"></td>
    <td><input type="text" name="age[]" placeholder="Enter Age"></td>
    <td><input type="text" name="job[]" placeholder="Enter Job"></td>
   </tr>
  </table>
  <input type="button" onclick="add_row();" value="ADD ROW">
  <input type="submit" name="submit_row" value="SUBMIT">
 </form>
</div>

Javascript

    function add_row()
{
    $rowno=jQuery("#employee_table tr").length;
    $rowno=$rowno+1;
    jQuery("#employee_table tr:last").after(
        "<tr id='row"+$rowno+"'>"+
            "<td><input type='text' name='name[]' placeholder='Enter Name'></td>"+
            "<td><input type='text' name='age[]' placeholder='Enter Age'></td>"+
            "<td><input type='text' name='job[]' placeholder='Enter Job'></td>"+
            "<td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td>"+
        "</tr>");
    }


function delete_row(rowno)
{
    jQuery('#'+rowno).remove();
}

Answer 1

You can use map()

 let res = $('tr').map((_, row) => { return [$(row).find('input').map((_, el) => el.value).get()] }).get() console.log(res) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div id="form_div"> <form method="post" action="store_employee.php"> <table id="employee_table" align=center> <tr id="row1"> <td><input type="text" name="name[]" placeholder="Enter Name" value="Joe"></td> <td><input type="text" name="age[]" placeholder="Enter Age" value="34"></td> <td><input type="text" name="job[]" placeholder="Enter Job" value="President"></td> </tr> <tr id="row1"> <td><input type="text" name="name[]" placeholder="Enter Name" value="Bill"></td> <td><input type="text" name="age[]" placeholder="Enter Age" value="77"></td> <td><input type="text" name="job[]" placeholder="Enter Job" value="Flunky"></td> </tr> </table> <input type="button" onclick="add_row();" value="ADD ROW"> <input type="submit" name="submit_row" value="SUBMIT"> </form> </div> 

Answer 2

You can use the name attribute to target the right inputs... Then look for the value.

 function add_row() { $rowno=jQuery("#employee_table tr").length; $rowno=$rowno+1; jQuery("#employee_table tr:last").after( "<tr id='row"+$rowno+"'>"+ "<td><input type='text' name='name[]' placeholder='Enter Name'></td>"+ "<td><input type='text' name='age[]' placeholder='Enter Age'></td>"+ "<td><input type='text' name='job[]' placeholder='Enter Job'></td>"+ "<td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td>"+ "</tr>"); } function delete_row(rowno) { jQuery('#'+rowno).remove(); } $("#test").on("click",function(){ var names =[]; var nameInputs = $("input[name='name[]']"); for (i=0;i<nameInputs.length;i++){ names.push(nameInputs.eq(i).val()); } console.log(names.join(",")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div id="form_div"> <form method="post" action="store_employee.php"> <table id="employee_table" align=center> <tr id="row1"> <td><input type="text" name="name[]" placeholder="Enter Name"></td> <td><input type="text" name="age[]" placeholder="Enter Age"></td> <td><input type="text" name="job[]" placeholder="Enter Job"></td> </tr> </table> <input type="button" onclick="add_row();" value="ADD ROW"> <input type="submit" name="submit_row" value="SUBMIT"> </form> </div> <br> <br> <button id="test">Show names in console</button> 

Answer 3

var names = $("[name='name[]']");