gpt4 book ai didi

javascript - 从 JSON 动态创建表并在生成表后对列执行操作

转载 作者:行者123 更新时间:2023-12-03 02:44:08 24 4
gpt4 key购买 nike

我正在尝试创建一个通过 Ajax 调用获取 JSON 的动态表,并根据该数据创建一个表。我已经完成了这一部分,但我的主要问题是,表列之一将是一个可编辑字段,它应该是通过 ajax 创建的不同列。

我真正的主要问题是如何告诉 JQuery 我希望更新它旁边的列。

<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="jquery.tabletojson.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.dataTables.min.css"/>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
<tbody></tbody>
</thead>
<script>
$(document).ready(function() {
$.get("objects.txt", function(response){
var obj = jQuery.parseJSON(response);
$.each(obj.data, function(key,value){
$("#example tbody").append("<tr>");
$("#example tbody").append("<td contenteditable=true>"+ value.name +"</td>");
$("#example tbody").append("<td>" + value.position +"</td>")
$("#example tbody").append("<td>" + value.Office +"</td>")
$("#example tbody").append("</tr>");
});
//uses a table to json library
var json = $("#example").tableToJSON();
});
});

</script>
</body>

为了简单起见,当编辑“名称”字段时,我希望编辑该行上的办公室字段。不完全确定从这里去哪里。感谢您的帮助!

最佳答案

尝试合并整个 <tr>一次调用即可追加。

var obj = {
data: [
{
name: "person 1",
position: "President",
Office: "Corner"
},
{
name: "person 2",
position: "Developer",
Office: "Penthouse"
},
]
};

$(document).ready(function() {
$.each(obj.data, function(key,value){
$("#example tbody").append("<tr><td contenteditable=true>"+ value.name +"</td><td>" + value.position +"</td><td>" + value.Office +"</td></tr>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
<tbody></tbody>
</thead>
</table>

关于javascript - 从 JSON 动态创建表并在生成表后对列执行操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48174636/

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