Javascript 如何设置使用ajax动态创建的HTML表列的唯一名称和id
我正在创建一个JSP页面，其中有一个文本字段和按钮。若用户在textfield中输入一些整数值，比如说2，那个么最终将在Html表中追加2行。所以HTML表的行是动态创建的 我使用ajax调用一个页面来实现这一点，该页面包含Javascript 如何设置使用ajax动态创建的HTML表列的唯一名称和id,javascript,jquery,html,ajax,jsp,Javascript,Jquery,Html,Ajax,Jsp,我正在创建一个JSP页面，其中有一个文本字段和按钮。若用户在textfield中输入一些整数值，比如说2，那个么最终将在Html表中追加2行。所以HTML表的行是动态创建的 我使用ajax调用一个页面来实现这一点，该页面包含数据，该数据将添加到最后一行之后的主表中 一切正常。行是使用ajax调用动态创建的。但问题是，添加到表中的所有行都具有相同的列名属性 下面是我的代码： JSP主页面： <%@ page language="java" contentType="text/html; ch
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.table {
font-size: 11px;
}
#dailyTableDiv {
height: 70%;
overflow: scroll;
}
</style>
<script>
function addTask(){
var n=$("#dailytsks").val();
for(i=1;i<=n;i++){
$.ajax({url:"employeeSection/dailyTableRow.jsp",success:function(result){
$('#dailyTable tr:last').after(result);
}});
}
//------------------------------
// i am trying this code to set different names for different select box column.
//but this is not happenting.
for(i=1;i<=n;i++){
$("#chSelect").attr("name","chSelect"+i);
}
//------------------------------
}
function add1Row(){
$.ajax({url:"employeeSection/dailyTableRow.jsp",success:function(result){
$('#dailyTable tr:last').after(result);
}});
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="well">
<input type="text" id="dailytsks" name="dailytsks" /><input
type="button" name="addTsks" value="add" onclick="addTask();" /> <span
style="margin-left: 20px;"></span><input type="button" value="+"
id="add1" name="add1" onclick="add1Row();" /> <span
style="margin-left: 20px;"></span><input type="button" value="-"
id="minus" name="minus" />
</div>
</div>
<div class="container-fluid">
<div id="dailyTableDiv">
<table id="dailyTable" class="table table-bordered">
<thead>
<tr>
<th>Select</th>
<th>Date</th>
<th>Client Name</th>
<th>Task-Type</th>
<th>NBPE-Type</th>
<th>Task-Name</th>
<th>Planned-Hrs</th>
<th>Priority</th>
<th>Cross-Team</th>
<th>Current-Status</th>
<th>Is-Completed</th>
<th>Actual-Hrs</th>
<th>SMC-ID</th>
<th>SMC-URL</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
在此处插入标题
.桌子{
字体大小：11px；
}
#每日表格{
身高：70%；
溢出：滚动；
}
函数addTask（）{
var n=$（“#dailytsks”）.val（）；
对于（i=1；i
基本思想是将行号存储在一个全局变量中，每次通过Ajax添加一行时，该变量都会增加
当Ajax调用resolve时，您可以使用JQuery解析生成的html（result
），更改chSelect
元素的name
属性，并像前面一样将更改附加到最后一个tr
：
// add a global variable to store row number
var row = 0;
function addTask(){
var n = $("#dailytsks").val();
var max = parseInt(n);
for(i=1; i<=max; i++){
$.ajax({
url: "employeeSection/dailyTableRow.jsp",
success: function(result){
row += 1
var newName = "chSelect" + row;
var html = $('<div>').append(result);
$(html).find("#chSelect").attr("name", newName)
$('#dailyTable tr:last')
.after( html.html() )
}
});
}
}
function add1Row(){
$.ajax({
url: "employeeSection/dailyTableRow.jsp",
success: function(result){
row += 1;
var newName = "chSelect" + row;
var html = $('<div>').append(result);
$(html).find("#chSelect").attr("name", newName)
$('#dailyTable tr:last')
.after( html.html() )
}
});
}
//添加一个全局变量来存储行号
var行=0；
函数addTask（）{
var n=$（“#dailytsks”）.val（）；
var max=parseInt（n）；
对于（i=1；i来说，基本思想是将行号存储在一个全局变量中，每次通过Ajax添加一行时，该变量都会增加
当Ajax调用resolve时，您可以使用JQuery解析生成的html（result
），更改chSelect
元素的name
属性，并像前面一样将更改附加到最后一个tr
：
// add a global variable to store row number
var row = 0;
function addTask(){
var n = $("#dailytsks").val();
var max = parseInt(n);
for(i=1; i<=max; i++){
$.ajax({
url: "employeeSection/dailyTableRow.jsp",
success: function(result){
row += 1
var newName = "chSelect" + row;
var html = $('<div>').append(result);
$(html).find("#chSelect").attr("name", newName)
$('#dailyTable tr:last')
.after( html.html() )
}
});
}
}
function add1Row(){
$.ajax({
url: "employeeSection/dailyTableRow.jsp",
success: function(result){
row += 1;
var newName = "chSelect" + row;
var html = $('<div>').append(result);
$(html).find("#chSelect").attr("name", newName)
$('#dailyTable tr:last')
.after( html.html() )
}
});
}
//添加一个全局变量来存储行号
var行=0；
函数addTask（）{
var n=$（“#dailytsks”）.val（）；
var max=parseInt（n）；
对于（i=1；i这可能会对您有所帮助
HTML:-
<input type="checkbox" name="chSelect" class="chSelect" />
<input type="checkbox" name="chSelect" class="chSelect" />
<input type="checkbox" name="chSelect" class="chSelect" />
链接：-
这可能会对您有所帮助
HTML:-
<input type="checkbox" name="chSelect" class="chSelect" />
<input type="checkbox" name="chSelect" class="chSelect" />
<input type="checkbox" name="chSelect" class="chSelect" />
链接：-
现在只显示3个复选框。没有其他组件可见。我的坏，我没有正确地修改HTML，请尝试编辑的版本。这个解决方案不是很优雅，您应该考虑将变量直接传递到Ajax请求中，并使用这个变量在服务器端设置<代码>名称< /Cord>属性。uld还使用类似Knockout.js的框架[只需几行代码就可以做到这一点哦，是的，你说得太对了。我应该传递一个参数，比如1,2,3,4，…让用户输入ajax请求URL。然后，在那个特定页面上，我应该通过每次追加行号来迭代代码。谢谢你的建议。它现在只显示了3个复选框。没有其他组件当然，我的坏，我没有正确地修改HTML，请尝试编辑的版本。这个解决方案不是很优雅，你应该考虑把变量直接传递到Ajax请求中，并使用这个变量在服务器端设置<代码>名称< /代码>属性。你也可以使用像KokOut.js这样的框架。[只需几行代码就可以做到这一点哦，是的，你说得太对了。我应该传递一个参数，比如1,2,3,4，…用户已经输入了ajax请求URL。然后，在那个特定页面上，我应该通过每次追加行号来迭代我的代码。谢谢你的建议。我应该在我的案例。当我在我的addTask（）方法结束前添加代码时，它无法更改name属性值。我在chrome的inspect元素选项中选中了该选项。在我的案例中，我应该在哪里添加上述javascript代码。当我在我的addTask（）中添加代码时方法结束之前，它无法更改name属性值。