JQuery `val()` для элемента ввода, возвращающего пустой
Я пытаюсь создать таблицу элементов в HTML, а затем при нажатии кнопки редактирования (которая находится рядом со строкой, которую вы хотите отредактировать) текстовые элементы превращаются в элементы <input>.
Однако после того, как вы введете значения в поля ввода и снова нажмете кнопку редактирования (сохранив изменения), предполагается, что исходные текстовые элементы будут содержать те, которые были введены в поле ввода.
Я также пробовал использовать функцию text(), и она также возвращает пустое значение.
Это мой HTML...
<table>
<tr id='0'>
<td id='editable' style = "border:1px solid #000;padding:7px">Title</td>
<td id='editable' style = "border:1px solid #000;padding:7px">0 mins</td>
<td id='editable' style = "border:1px solid #000;padding:7px">Genre</td>
<td id='editable' style = "border:1px solid #000;padding:7px">[]</td>
<td id='editable' style = "border:1px solid #000;padding:7px">0</td>
<td>
<button id = "editButton" style = "background-color:#ADD8E6" />🖉
</td>
</tr>
</table>
И это мой jQuery...
$("#editButton").click(function() {
if ($(this).attr('id') === "editButton") {
$(this).parent().parent().children("#editable").html("<input type='text' id='editable'/>");
$(this).attr("id", "saveable")
} else {
$(this).parent().parent().children("#editable").each(function(i) {
$(this).html("<td>" + $(this).val() + "</td>")
})
$(this).attr("id", "editButton")
}
});
Я тестировал это на JSFiddle: https://jsfiddle.net/ajecdm5n/1/.
Кроме того, если я могу внести какие-либо улучшения, пожалуйста, сообщите мне.
где ты пишешь кодировку для сохранения?
@CBroe Могу ли я тогда просто перебрать все дочерние элементы(), чтобы изменить каждый элемент?
@Vel Я просто использую это для проверки редактирования элементов таблицы. Экономия пока отдельная.
Проверьте эту скрипку jsfiddle.net/pymftrdw Вы так выглядите?
В принципе да, но я хочу, чтобы она выглядела как стартовая таблица, но с новыми значениями.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Во-первых, id должен быть уникальным идентификатором одного элемента на странице, тогда как у вас их несколько с одинаковым идентификатором. Если вам нужно, чтобы многие элементы имели один и тот же идентификатор, лучше вместо этого присвоить им class.
Далее, ваши элементы #editable — это ваши элементы <td>, а также редактируемое текстовое поле, поэтому фактически отображаемый HTML предположительно выглядит как <td id='editable'><input type='text' id='editable' />. Это вызывает проблемы в вашем цикле for, потому что вы сначала устанавливаете html на <td>, что удаляет <input>, а затем пытаетесь зациклиться на вводе. Кроме того, у <td> нет .val(), поэтому вызов вашего метода пуст.
Вы также можете рассмотреть возможность использования свойств данных для хранения того, является ли это кнопкой редактирования или нет, поскольку я думаю, что изменение идентификатора может быть проблематичным.
Может быть, что-то вроде этого будет лучше?
<table>
<tr id='0'>
<td class='editable' style = "border:1px solid #000;padding:7px">Title</td>
<td class='editable' style = "border:1px solid #000;padding:7px">0 mins</td>
<td class='editable' style = "border:1px solid #000;padding:7px">Genre</td>
<td class='editable' style = "border:1px solid #000;padding:7px">[]</td>
<td class='editable' style = "border:1px solid #000;padding:7px">0</td>
<td>
<button class = "editButton" style = "background-color:#ADD8E6" />🖉
</td>
</tr>
</table>
$(".editButton").click(function() {
const btn = $(this);
const row = btn.parent().parent();
if (btn.data("editing") === "true") {
row.children(".editable").each(function(i) {
const editField = $(":first-child", $(this)); //only element is input
$(this).html("<td>" + editField.val() + "</td>")
});
btn.data("editing", "false");
} else {
row.children(".editable").html("<input type='text' class='editable-field'/>"); //give it a different class so we can look it up by that if needed
btn.data("editing", "true");
}
});
При попытке сохранить изменения с помощью этого я получаю TypeError: editField.val is not a function.
Ох, моя вина, я давно не пользовался jQuery! Я дал вам сырой HTMLElement вместо одного, завернутого в jQuery, сейчас обновлю
Спасибо! Это именно то, чего я пытался достичь.
$("#editButton").click(function() {
if ($(this).attr('id') === "editButton") {
$(this).parent().parent().children(".editable").html("<input name='test[]' type='text' id='editable' value=''/>");
$(this).attr("id", "saveable")
} else {
let Inputhtml ='';
$(this).closest("tr").find(".editable input").each(function(i) {
Inputhtml + = "<td>" + $(this).val() + "</td>";
//$(".testtable").html("<td>" + $(this).val() + "</td>")
})
$(".testtable").html(Inputhtml);
$(this).attr("id", "editButton")
}
});.table {
margin-left: 20px;
width: 80%;
}
.input {
margin-left: 20px;
width: 10px;
}
.td {
margin-right: 10px;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table class = "testtable">
<tr id='0'>
<td class='editable' style = "border:1px solid #000;padding:7px">Title</td>
<td class='editable' style = "border:1px solid #000;padding:7px">0 mins</td>
<td class='editable' style = "border:1px solid #000;padding:7px">Genre</td>
<td class='editable' style = "border:1px solid #000;padding:7px">[]</td>
<td class='editable' style = "border:1px solid #000;padding:7px">0</td>
<td style = "color:blue">0</td>
<td>
<button id = "editButton"style = "background-color:#ADD8E6"/>🖉
</td>
<td>
<button style = "background-color:#F08080"/>⛌
</td>
</tr>
</table>Обновить ссылку на скрипку
https://jsfiddle.net/pymftrdw/2/
По сути, это то, что я ищу, однако я хочу, чтобы она выглядела как стартовая таблица, но с новыми значениями.
я тебя не понял
Неважно, я пропустил Inputhtml. Все работает именно так, как я хочу, спасибо за помощь!
Пожалуйста, проверьте ссылку на обновление скрипта
Идентификаторы должны быть уникальными, и это первое, что вам нужно здесь исправить.