如何获取动态创建的表的值？
上面的屏幕截图显示了实际正确的形式。为了得到这个，我尝试了以下代码。我的<td>包含一个标题以及一个子点，它们是动态添加的。点击提交按钮时，我想阅读与该标题相对应的标题和子点。数据格式如下。
我正在分别使用标题和数据动态添加行。我试图在通过AJAX将数据发送到服务器之前将数据收集到一个对象中。我无法读取给定格式的数据。
HTML代码
<div class="container-fluid">
<h4>Scorecard Metrics</h4>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<div class="button-bar">
<button class="btnn btnn--pill add-point">Add Sub-Point</button>
<button class="btnn btnn--pill add-heading">Add Heading</button>
</div>
<div class="table-responsive-sm">
<table id="table-scorecard_co" class="table table-bordered">
<thead>
<tr>
<th style="width: 100px!important;" rowspan="2">Metrics</th>
<th style="width: 92px!important;" rowspan="2">Weightage</th>
<th colspan="4" scope="colgroup">Target</th>
<th style="width: 85px!important;" rowspan="2">Actions</th>
</tr>
<tr>
<th>L1</th>
<th>L2</th>
<th>L3</th>
<th>L4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display: none;">
<a class="plus" title="Plus" ><i class="material-icons"></i></a>
<a class="update" title="Update" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="destroy" title="Destroy"><i class="material-icons"></i></a>
</td>
<td style="display: none;">
<a class="add" title="Add" ><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="button-bar">
<button class="btnn btnn--pill submit" id="Scoresubmit">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- #/ container -->
</div>
JAVASCRIPT CODE
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
var menubar = $("table td:nth-last-child(2)").html();
$(".add-heading").click(function(){
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row = '<tr class="heading">' +
'<td id="HeadingLabelScorecard" colspan="3"><span id="label_hide" class="heading_label">Heading</span><input id="heading_label_input" class="heading_label-box" type="text" class="form-control"></td>' +
'<td id="HeadingLabelScorecard" colspan="2"><span id="label_hide2" class="heading_weight-label">Total Weightage</span><input class="Tweightage" id="wei'+(wei) + '" type="number" ></td>' +
'<td colspan="1"><span id="label_hide3" class="heading_labelCheckbox">Divide Weightage</span><input class="heading_checkbox" name="Dividecheckbox" id="heading_checkbox" type="checkbox">' +
'<td style="text-align:center;">' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
wei ++;
});
$(".add-point").click(function(){
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index(); //TO ADD ROW AS LAST Child
var lastCheckBox = $('[name="Dividecheckbox"]:last').prop("checked"); //get status of last checkbox
if(lastCheckBox==false){
//Enable row
var row = '<tr class="Parameters" style="text-align: center;">' +
'<td><input class="subpoint_label-box" type="text" class="form-control"id="metrics'+(unique_id) + '"></td>' +
'<td><input disabled class="subpoint_weightage2" id="weightage'+(unique_id) + '" type="number" ></td>' +
'<td><input class="slider_min-value" type="text" id="ex0n'+i+'" value="20"><b id="percentage">%</b><input class="subpoint-sbody" style="width: 120px;" name="n'+i+'" id="ex'+(unique_id) + '" type="text" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input class="slider_max-value" type="text" id="ex1n'+(i)+'" value="80"><b id="percentageMax">%</b></td>' +
'<td><input class="slider_min-value" type="text" id="lx0n'+(i)+'" value="20"><b id="percentage">%</b><input class="subpoint-sbody" style="width: 120px;" name="n'+i+'" id="lx'+(unique_id) + '" type="text" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input class="slider_max-value" type="text" id="lx1n'+(i)+'" value="80"><b id="percentageMax">%</b></td>' +
'<td><input class="slider_min-value" type="text" id="zx0n'+(i)+'" value="20"><b id="percentage">%</b><input class="subpoint-sbody" style="width: 120px;" name="n'+i+'" id="zx'+(unique_id) + '" type="text" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input class="slider_max-value" type="text" id="zx1n'+(i)+'" value="80"><b id="percentageMax">%</b></td>' +
'<td><input class="slider_min-value" type="text" id="yx0n'+(i)+'" value="20"><b id="percentage">%</b><input class="subpoint-sbody" style="width: 120px;" name="n'+i+'" id="yx'+(unique_id) + '" type="text" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input class="slider_max-value" type="text" id="yx1n'+(i)+'" value="80"><b id="percentageMax">%</b></td>' +
'<td width="20">' + menubar + '</td>' +
'</tr>';
}
else if(lastCheckBox==true){
var row = '<tr class="Parameters" style="text-align: center;">' +
'<td width="20"height="50"><input class="subpoint_label-box" type="text" class="form-control"id="metrics'+(unique_id) + '"></td>' +
'<td width="20"><input class="subpoint_weightage" id="weightage'+(unique_id) + '" type="number" ></td>' +
'<td><input class="slider_min-value" type="text" id="ex0n'+i+'" value="20"><b id="percentage">%</b><input class="subpoint-sbody" style="width: 120px;" name="n'+i+'" id="ex'+(unique_id) + '" type="text" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input class="slider_max-value" type="text" id="ex1n'+(i)+'" value="80"><b id="percentageMax">%</b></td>' +
'<td><input class="slider_min-value" type="text" id="lx0n'+(i)+'" value="20"><b id="percentage">%</b><input class="subpoint-sbody" style="width: 120px;" name="n'+i+'" id="lx'+(unique_id) + '" type="text" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input class="slider_max-value" type="text" id="lx1n'+(i)+'" value="80"><b id="percentageMax">%</b></td>' +
'<td><input class="slider_min-value" type="text" id="zx0n'+(i)+'" value="20"><b id="percentage">%</b><input class="subpoint-sbody" style="width: 120px;" name="n'+i+'" id="zx'+(unique_id) + '" type="text" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input class="slider_max-value" type="text" id="zx1n'+(i)+'" value="80"><b id="percentageMax">%</b></td>' +
'<td><input class="slider_min-value" type="text" id="yx0n'+(i)+'" value="20"><b id="percentage">%</b><input class="subpoint-sbody" style="width: 120px;" name="n'+i+'" id="yx'+(unique_id) + '" type="text" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input class="slider_max-value" type="text" id="yx1n'+(i)+'" value="80"><b id="percentageMax">%</b></td>' +
'<td width="20">' + menubar + '</td>' +
'</tr>';
}
else{
alert("Please Add Heading!!");
}
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".plus, .update").toggle();
$('[data-toggle="tooltip"]').tooltip();
$("#ex"+unique_id).slider({});
$("#ex"+unique_id).on("slide", function(slideEvt) {
var nid=$(this).attr('name');
$("#ex0"+nid).val(slideEvt.value[0]);
$("#ex1"+nid).val(slideEvt.value[1]);
});
$("#lx"+unique_id).slider({});
$("#lx"+unique_id).on("slide", function(slideEvt) {
var nid=$(this).attr('name');
$("#lx0"+nid).val(slideEvt.value[0]);
$("#lx1"+nid).val(slideEvt.value[1]);
});
$("#zx"+unique_id).slider({});
$("#zx"+unique_id).on("slide", function(slideEvt) {
var nid=$(this).attr('name');
$("#zx0"+nid).val(slideEvt.value[0]);
$("#zx1"+nid).val(slideEvt.value[1]);
});
$("#yx"+unique_id).slider({});
$("#yx"+unique_id).on("slide", function(slideEvt) {
var nid=$(this).attr('name');
$("#yx0"+nid).val(slideEvt.value[0]);
$("#yx1"+nid).val(slideEvt.value[1]);
});
unique_id++
i++
});
我试图获取数据的原因
$('#Scoresubmit').click(function () {
GetCoScoreCard();
//ajax calll
});
function GetCoScoreCard() {
$('#scorecard_co .heading').each(function () { //tr
var TotalWeightage;
var item = $(this).closest("tr").find('td');
$.each(item, function (key, value) { //Heading
if (key == 0) {
Heading1 = ($(value).text());
this.Heading1 = Heading1;
}
else if (key == 1) {
TotalWeightage = ($(value).text());
}
else if (key == 2) {
lastCheckBox = $('[name="Dividecheckbox"]:last').prop("checked");
}
});
var parametername, param_Weightage;
$('#scorecard_co .Parameters').each(function () { //td //parameters
var item2 = $(this).closest("tr").find('td');
$.each(item2, function (key, value) {
datalist = ($(value).text());
if (key == 0) {
parametername = ($(value).text());
}
if (key == 1) {
param_Weightage = ($(value).text());
}
if (key == 2 || key == 3 || key == 4 || key == 5)
{
var res = datalist.substring(1, 3);
var res2 = datalist.substring(6, 8);
var key1 = 'L' + i;
MyLevels[key1] = res + "," + res2;
i++;
}
});
parameters = {
"Name": parametername,
"Weightage": param_Weightage,
"Levels": MyLevels, //array
}
paramarray.push(parameters); //paramNewArray
MyLevels = {};
i = 0;
});
metrics={
'Heading':Heading1,
'TotalWeitage': TotalWeightage, //metrics heading and parameters
'DivideWeightage': lastCheckBox,
'parameters': paramarray // paramNewArray
//work in process
}
var stringyfydata = JSON.stringify(metrics);
data1.push(stringyfydata); alert("Title=" + data1);
console.log(data1);
data = {};
parameters = {};
i = 0;
});
}
期望的数据输出
[
{"Heading":"SchduleAdherence","TotalWeitage":"20","DivideWeightage":true,"parameters":{"Name":"Scrunity","Weightage":"30","Levels":{"L1":"20,80","L2":"20,80","L3":"20,80","L4":"20,80"}}]},
{"Heading":"Attendence","TotalWeitage":"30","DivideWeightage":true,"parameters":{"Name":"self","Weightage":"30","Levels":{"L1":"20,80","L2":"20,80","L3":"20,80","L4":"20,80"}}]}
]
有两个类（.Heading =读取标题，例如出勤率，另一个是.Parameter =读取子点），我的问题是每次尝试遍历数据，所有参数都反复添加到我的对象中。
1 个答案:
答案 0 :(得分：0)
您需要在go评分代码中重新初始化变量；
function GetCoScoreCard() {
paramArray = [];
data1 = [];
.....
.....
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？