Question

我试图通过jQuery从输入中检索名称列表。谁能告诉我怎么做呢？

以下输入例如：

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

如何使用jQuery和名称[]属性检索姓名Henry，Eric，Lance？

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

您可以使用map()

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用name属性来定位正确的输入...然后查找值。

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[]']");

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

3 个答案: