如何从表中动态创建的文本框中向json对象提供值？ [英] How to Feed values to json object from textboxes dynamically created in a table?
本文介绍了如何从表中动态创建的文本框中向json对象提供值？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
// 她是标记，然后它是Jquery代码
<！DOCTYPE html>
< html xmlns = http://www.w3.org/1999/ xhtml >
< head runat = server >
< title> < / title >
<脚本 src = Scripts / jquery-1.7.1.intellisense.js > < / script >
< script src = Scripts / jquery-1.7.1.js > < span class =code-keyword>< / script >
< script src = Scripts / MyJava.js > < span class =code-keyword>< / script >
< / head >
< body>
< form id = form1 runat = server >
< div>
< table id = Table1 >
< tr>
< td>名称：
< asp：TextBox ID = txtName runat = server > < / asp：TextBox >
< / td >
< td>性别：
< asp：TextBox ID = txtGender runat = server > < / asp：TextBox >
< / td >
< td>
< input type = button class = BtnPlus value = + />
< / td >
< td>
< input type = button class = BtnMinus value = - />
< / td >
< / tr >
< / table >
< input type = button value = 创建Json id = btnJson />
< / div >
< / 表格 >
< / body >
< / html >
$（ document ）。ready（ function （）{
function addRow（） {
var html = ' < tr> ;' +
' < td>名称：' +
' < input type =textid =txtName/ >' +
' < / td>' +
' < td>性别：' +
' < input type =textid =txtGender/>' +
' < td>' +
' < input type =buttonclass =BtnPlusvalue =+/>' +
' < / td>' +
' < td>' +
' < input type =buttonclass =BtnMinusvalue = - />' +
' < / td>' +
' < / tr>';
$（html）.appendTo（$（' ＃Table1'））;
}
function deleteRow（）{
var par = $ （ this ）。parent（）。parent（）;
par.remove（）;
}
$（' ＃Table1'）。 （' 点击'，' 。BtnPlus'，addRow）;
$（' ＃Table1'）。on（' 单击， 。 BtnMinus'，deleteRow）;
var data = {items：[]};
var name = ;
var gender = ;
$（' ＃btnJson'）。click（ function （）{
$（' ＃Table1 tr'） .each（ function （）{
if （$（ this ）。attr（ id）== = txtName）{
name = $（ this ）。text（）;
data.items.push（$（ this ）。val（））;
}
if （$（ this ）。attr（ id）=== < span class =code-string> txtGender）{
gender = $（此）VAL（）;
data.items.push（$（ this ）。val（））;
}
data.push（{name：name，gender：gender}）;
}）;
console .log（data）;
alert（ JSON .stringify（data））;
}）;
}）;
解决方案
（ document ）。ready（ function （）{
function addRow（）{
var html = ' < tr>' +
< span class =code-string>' < td>名称：' +
' < input type =textid =txtName/>' +
' < / td>' +
' < td>性别：' +
' <输入type =textid =txt性别/>' +
' < td>' +
' < input type =buttonclass =BtnPlusvalue =+/> ' +
' < / td>' +
' < td>' +
' < input type =buttonclass =BtnMinusvalue = - />' +
' < / td>' +
' < / tr>';
（html）.appendTo（
（ ' ＃Table1'））;
}
function deleteRow（）{
var par =
//Her is the markup and belove it is the Jquery code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.7.1.intellisense.js"></script>
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/MyJava.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="Table1">
<tr>
<td>Name:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
<td>Gender:
<asp:TextBox ID="txtGender" runat="server"></asp:TextBox>
</td>
<td>
<input type="button" class="BtnPlus" value="+" />
</td>
<td>
<input type="button" class="BtnMinus" value="-" />
</td>
</tr>
</table>
<input type="button" value="Create Json" id="btnJson" />
</div>
</form>
</body>
</html>
$(document).ready(function () {
function addRow() {
var html = '<tr>' +
'<td>Name:' +
'<input type="text" id="txtName"/>' +
'</td>' +
'<td>Gender:' +
'<input type="text" id="txtGender" />' +
'<td>' +
'<input type="button" class="BtnPlus" value="+" />' +
'</td>' +
'<td>' +
'<input type="button" class="BtnMinus" value="-" />' +
'</td>' +
'</tr>';
$(html).appendTo($('#Table1'));
}
function deleteRow() {
var par = $(this).parent().parent();
par.remove();
}
$('#Table1').on('click', '.BtnPlus', addRow);
$('#Table1').on('click', '.BtnMinus', deleteRow);
var data = { items: [] };
var name = "";
var gender = "";
$('#btnJson').click(function () {
$('#Table1 tr').each(function () {
if ($(this).attr("id") === "txtName") {
name = $(this).text();
data.items.push($(this).val());
}
if ($(this).attr("id") === "txtGender") {
gender = $(this).val();
data.items.push($(this).val());
}
data.push({ name: name, gender: gender });
});
console.log(data);
alert(JSON.stringify(data));
});
});
解决方案
(document).ready(function () { function addRow() { var html = '<tr>' + '<td>Name:' + '<input type="text" id="txtName"/>' + '</td>' + '<td>Gender:' + '<input type="text" id="txtGender" />' + '<td>' + '<input type="button" class="BtnPlus" value="+" />' + '</td>' + '<td>' + '<input type="button" class="BtnMinus" value="-" />' + '</td>' + '</tr>';
(html).appendTo(
('#Table1')); } function deleteRow() { var par =
这篇关于如何从表中动态创建的文本框中向json对象提供值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
