gpt4 book ai didi

javascript - 如何迭代动态生成的输入框列表并生成 json

转载 作者:行者123 更新时间:2023-12-03 06:41:17 24 4
gpt4 key购买 nike

我有以下代码,但代码没有进入第二个.each(TD INPUT)

<!DOCTYPE html>
<html lang="en">

<head>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>

<body>
<script>
arrayToTable = function(data, options = {}) {
var table = $('<table />'),
thead,
tfoot,
rows = [],
row,
i, j,
defaults = {
th: true, // should we use th elemenst for the first row
thead: false, //should we incldue a thead element with the first row
tfoot: false, // should we include a tfoot element with the last row
attrs: {} // attributes for the table element, can be used to
}

options = $.extend(defaults, options);

table.attr(options.attrs)

// loop through all the rows, we will deal with tfoot and thead later
for (i = 0; i < data.length; i++) {
row = $('<tr />');
for (j = 0; j < data[i].length; j++) {
if (i == 0 && options.th) {
row.append($('<th />').html(data[i][j]));
} else {
row.append($('<td />').html("<input type='text' name='fname'>"));
}
}
rows.push(row);
}

// if we want a thead use shift to get it
if (options.thead) {
thead = rows.shift();
thead = $('<thead />').append(thead);
table.append(thead);
}

// if we want a tfoot then pop it off for later use
if (options.tfoot) {
tfoot = rows.pop();
}

// add all the rows
for (i = 0; i < rows.length; i++) {
table.append(rows[i]);
};

// and finally add the footer if needed
if (options.tfoot) {
tfoot = $('<tfoot />').append(tfoot);
table.append(tfoot);
}
return table;
}

var data = [
['Name', 'Age', 'Email']
];

var table = arrayToTable(data, {
thead: true,
attrs: {
class: 'table'
}
})

$('body').append(table);
</script>

<button class="add-row">Add row</button>
<button class="read-row">Read data</button>
<button class="buildjson-row">BuildJson</button>
<script>
$('.add-row').on('click', function() {
sb = "<tr>";
for (var i = 0; i < 1; i++) {
for (var j = 0; j < data[i].length; j++) {
sb = sb + "<td><input type='text' id='" + j + '"_"' + data[i][j] + "'></td>";
}
}
sb = sb + "</tr>";
$('.table').append(sb);
});
$(".read-row").on('click', function() {
$('input').each(function(index, data) {
var value = $(this).val();
alert(value);
});
return false;
});

$(".buildjson-row").on('click', function() {
jsonObj = [];
$('tr').each(function(index, data) {
item = {}
$(this).find('td input').each(function(index, data) {
var id = $(this).attr('id');
var value = $(this).val();
nombrecolumna = id.split('_')[1];
item[nombrecolumna] = value;
});
jsonObj.push(item);
});
alert(jsonObj);
return false;
});
</script>
</body>

</html>

最佳答案

我不确定我是否正确理解您的问题,但我将首先修复您创建输入元素标识符的方式。你有:

sb = sb + "<td><input type='text' id='" + j + '"_"' + data[i][j] + "'></td>";

我会考虑让它变得更简单

sb = sb + "<td><input type='text' id='"'+ j + '_' + data[i][j] + "'></td>";

因此标识符将如下所示:

original: "1"_"Name"
proposed: "1_Name"

考虑到并非每个浏览器(html 客户端)都会处理多个“名称。

希望对您有帮助。

关于javascript - 如何迭代动态生成的输入框列表并生成 json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37949996/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com