Вы можете включать и отключать, для этого я добавил кнопку «Сохранить», чтобы снова отключить после завершения редактирования, и показал, как это сделать.
Используйте классы для кнопки и перехватите этот обработчик событийк таблице, чтобы избежать проблем, таких как кнопка отправки формы или другие кнопки на вашей странице.
Примечание: вы также можете найти все ДРУГИЕ кнопки редактирования и отключить их при редактировании одной строки.Для этого вам нужно добавить это в обработчики кликов
let editbutton = row.find('.edit'); // not this row
$('#myedittable').find('.edit').not(editbutton).prop('disabled', true);
и в save
$('#myedittable').find('.edit').prop('disabled', false);
Пример:
$(function() {
$('#myedittable').find('input[type="text"]').add('.save').prop('disabled', true);
});
$('#myedittable').on('click', '.edit', function() {
let row = $(this).closest('tr');
let savebutton = row.find('.save');
row.find('input[type=text]').add(savebutton).prop('disabled', false);
});
$('#myedittable').on('click', '.save', function() {
let row = $(this).closest('tr');
let savebutton = row.find('.save');
row.find('input[type="text"]').add(savebutton).prop('disabled', true);
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<h2>HTML Table</h2>
<table id="myedittable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Settings</th>
</tr>
<tr>
<td>TestData</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><button class="edit">Edit</button></td>
<td><button class="save">Save</button></td>
</tr>
<tr>
<td>TestData</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><button class="edit">Edit</button></td>
<td><button class="save">Save</button></td>
</tr>
<tr>
<td>TestData</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><button class="edit">Edit</button></td>
<td><button class="save">Save</button></td>
</tr>
<tr>
<td>TestData</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><button class="edit">Edit</button></td>
<td><button class="save">Save</button></td>
</tr>
<tr>
<td>TestData</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><button class="edit">Edit</button></td>
<td><button class="save">Save</button></td>
</tr>
<tr>
<td>TestData</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><button class="edit">Edit</button></td>
<td><button class="save">Save</button></td>
</tr>
</table>