Question

我想创建可以设置为可编辑的动态表，而不是，我使用<input>标签，因为我通过表单将数据提交给php。

这是表格的屏幕截图。

所以我想要发生的是，如果我点击该行的编辑字段按钮，该行上的<input>标记将设置为可编辑。

我设置<input type="text" readonly>。

Answer 1

您可以使用.prop()功能：

$('.enableEdit').click(function(){
    $(this).closest('tr').find('input').prop('readonly', false);
    $(this).closest('tr').find('select').prop('disabled', false);
});

.enableEdit是编辑按钮的类。

Answer 2

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#edit").click(function(){
       $("#txt").prop("readonly", false);
     
    });
});
</script>
<style>
table, th, td {
    border: 1px solid black;
}
input:-moz-read-only { /* For Firefox */
    background-color: yellow;
}

</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td><input type="text" id ="txt" readonly /></td>
    <td><button id="edit">Edit</button></td>
  </tr>
</table>

</body>
</html>

＆＃13;

试试这个，希望这可以解决你的问题

Answer 3

检查以下代码

<table>
<thead>
<tr>Heading </tr>

</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>

Answer 4

$(document).ready(function(){
	
	$('input').attr('disabled', 'disabled');
	$('select').attr('disabled', 'disabled');
	
	$('.edit').click(function(){
	
		var fullid = this.id.split('_');
		var id = fullid['1']
		
		$('#row_'+id+ '  input').removeAttr('disabled');
		$('#row_'+id+ '  select').removeAttr('disabled');		
		
	});
	
});

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form method="post">

	<div id="row_1">
		<input  type="text" value='2' name="edit[userid]"  />
		<select>
			<option>Supplier</option>
		</select>
		
		<select>
			<option>Test Supplier</option>
		</select>
		
		<button type="button" id="edit_1"  class="edit" href="javascript:void(0);">Edit</button>
	</div>
	
	<div id="row_2">
		<input  type="text" value='2' name="edit[userid]"  />
		<select>
			<option>Supplier</option>
		</select>
		
		<select>
			<option>Test Supplier</option>
		</select>
		
		<button type="button" id="edit_2"  class="edit" href="javascript:void(0);">Edit</button>
	</div>
	
</form>

</body>
</html>

如何设置输入标签以在特定表格行中启用？

4 个答案: