Get value from textboxes inside dynamic table using selector
-
03-10-2020 - |
Вопрос
I am creating one row every time im clicking on the btn Add row. In this row there is 3 textboxes and one lable(span) and one buttom. I want to reach by selector the value in the (input type:text) or the lable using the button in the created row (save projekt) to save this value in my Sharepoint hosted list. How can I do that please.
This is my HTML code
<div class="content">
<table id="Table">
</table>
</div>
<button type="button" onclick="add()">Add row</button>
This is my jquery code
function add() {
$("#Table").append("<tr class=\"tr\">" +
"<td><input type=\"text\"></td>" +
"<td><input type=\"text\"></td>" +
"<td><input type=\"text\"></td>" +
"<td><span \" class=\"lblStatus\"></span></td>" +
"<td><button type=\"button\" class=\"saveProjekt\">Save projekt</button></td>" +
"</tr>").trigger("create");
}
$(document).on("click", ".saveProjekt", function (e) {
var x1 = $(e.target).parent().parent().children("td .input:nth child(1)").val();
var x2 = $(e.target).parent().parent().children("td .input:nth child(2)").val();
alert(x1);
alert(x2);
})
Решение
You need to create HTML as below
<div class="content">
<table id="Table">
<tr class="tr">
<td><input type="text" class="Text1"/></td>
<td><input type="text" class="Text2"/></td>
<td><input type="text" class="Text3"/></td>
<td><span class="lblStatus"></span></td>
<td><button type="button" class="saveProjekt" tag="0">Save projekt</button></td>
</tr>
</table>
</div>
Now you can use below JavaScript for reading values
$(document).on("click", ".saveProjekt", function (e) {
var text1, text2, text3, status;
$(this).closest('tr').find('input').each(function(){
if($(this).attr("class") == "Text1") text1 = $(this).val();
if($(this).attr("class") == "Text2") text1 = $(this).val();
if($(this).attr("class") == "Text2") text1 = $(this).val();
});
$(this).closest('tr').find('span').each(function(){
status = $(this).text();
}
});
Не связан с sharepoint.stackexchange