获取每个表中的每个输入名称和值td在单击按钮的行中

Question

我想获取每个td中的每个属性名称和每个输入值，在一行中单击指定的按钮，然后将其放入ajax数据参数，如

data: { input1_name : input1_value,input2_name : input2_value,input3_name : input3_value }

例如，如果用户单击按钮1，则此按钮将获得与按钮在同一行中的每个输入值和名称，例如，如果按钮1和按钮1在行1中，则循环每个tds，获取每个输入值和名称，并将每个输入值和名称放入ajax数据参数。当然我可以使用.each函数来获取每个输入的名称和值，但我不知道如何将它放在ajax数据参数中，以便它看起来像这样。

data: { input1_name : input1_value,input2_name : input2_value,input3_name : input3_value }

任何帮助，线索，建议，帮助，建议都将不胜感激。谢谢！

＆＃13;

＆＃13;

$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
   url: "/role",
   type: "post",
   data: { /*each input name with each input's corresponding values here */ },
   success: function(data){
     alert("success");
   }
   }); //end of ajax
  }); //end of button click
});

＆＃13;

table{width: 100%;}
table thead th{font-weight: bold;border-bottom: 1px solid #ccc;}
table thead th, table tbody td{text-transform: uppercase; font-size: 15px;text-align: center;padding: 5px;}
table tbody td{border-top: 1px solid #ccc;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>test header 1</th>
      <th>test header 2</th>
      <th>test header 3</th>
      <th>Option</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent_tr">
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><button>submit 1</button></td>
    </tr>
    <tr class="parent_tr">
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><button>submit 2</button></td>
    </tr>
    <tr class="parent_tr">
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><button>submit 3</button></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

$(document).ready(function() {
  
  $("button").click(function(e) {
    var data = {};
    /* Select the closest row to the button that was clicked 
    on and find all the checkboxes. Then loop through them 
    and add the values to the data object created above 
    using their name attributes as keys. */
    $(this).closest('tr').find("input[type=checkbox]").each(function(){
      data[$(this).attr("name")]=$(this).attr("value");
    });
    $.ajax({
      url: "/role",
      type: "post",
      data: data,
      success: function(data) {
        alert("success");
      }
    }); //end of ajax
  }); //end of button click
});

＆＃13;

table {
  width: 100%;
}
table thead th {
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}
table thead th,
table tbody td {
  text-transform: uppercase;
  font-size: 15px;
  text-align: center;
  padding: 5px;
}
table tbody td {
  border-top: 1px solid #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>test header 1</th>
      <th>test header 2</th>
      <th>test header 3</th>
      <th>Option</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent_tr">
      <td>
        <input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox2" value="checkbox2_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox3" value="checkbox3_vaue" checked />
      </td>
      <td>
        <button>submit 1</button>
      </td>
    </tr>
    <tr class="parent_tr">
      <td>
        <input type="checkbox" name="checkbox4" value="checkbox4_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox5" value="checkbox5_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox6" value="checkbox6_vaue" checked />
      </td>
      <td>
        <button>submit 2</button>
      </td>
    </tr>
    <tr class="parent_tr">
      <td>
        <input type="checkbox" name="checkbox7" value="checkbox7_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox8" value="checkbox8_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox9" value="checkbox9_vaue" checked />
      </td>
      <td>
        <button>submit 3</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;