A table where each row is submittable

HTML

<table>
	<tbody>
		<tr>
			<td><input type="hidden" name="id" value="row1"/><input name="textfield" type="text" value="input1" /></td>
			<td><select name="selectfield">
				<option selected value="select1-option1">select1-option1</option>
				<option value="select1-option2">select1-option2</option>
				<option value="select1-option3">select1-option3</option>
			</select></td>
			<td><a class="submit" href="#" data-action="/exampleurl">Update</a></td>
		</tr>
		<tr>
			<td><input type="hidden" name="id" value="row2"/><input name="textfield" type="text" value="input2" /></td>
			<td><select name="selectfield">
				<option selected value="select2-option1">select2-option1</option>
				<option value="select2-option2">select2-option2</option>
				<option value="select2-option3">select2-option3</option>
			</select></td>
			<td><a class="submit" href="#" data-action="/different-url">Update</a></td>
		</tr>
		<tr>
			<td><input type="hidden" name="id" value="row3"/><input name="textfield" type="text" value="input3" /></td>
			<td><select name="selectfield">
				<option selected value="select3-option1">select3-option1</option>
				<option value="select3-option2">select3-option2</option>
				<option value="select3-option3">select3-option3</option>
			</select></td>
			<td><a class="submit" href="#">Update</a></td>
		</tr>
	</tbody>
</table>

JavaScript

$(".submit").on("click", function(event){
  event.preventDefault();
  var url = ($(this).data("action") === "undefined" ? "/" : $(this).data("action"));
  var row = $(this).parents("tr").first();
  var data = row.find("input, select, radio").serialize();
  $.post(url, data, function(result){ console.log(result); });
});