我创建了一个包含四列的表。加载新表单时，在表内动态创建很少的文本框和选择下拉列表。我还有一个文本框（最终值），用户将在其中输入一个值。这就是它实际出现的方式：
ID | Users | Values | Values to be billed
1 | (drop-down) | (text-box) | (text-box)
2 | (drop-down) | (text-box) | (text-box)
3 | (drop-down) | (text-box) | (text-box)
4 | (drop-down) | (text-box) | (text-box)
.
.
8 | (drop-down) | (text-box) | (text-box)
表格的页脚有“总价值”。当用户在表格内的一个文本框中输入值并移动到另一个文本框时，该值将相加。最后，“id = total_value”和“id = value_to_be_billed”中的值应相同。
提交表单时，我验证最终值文本框，“id = total_value”中的值和“id = value_to_be_billed”中的值。所有这些都应该具有相同的价值。然后我只保存从最终值文本框中获取的值（因为其他值具有相同的值）。
加载新表单时，表格中的所有文本框和选择下拉列表以及最终值文本框都应为空。
这是我尝试的方式：
HTML:
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-6">Final Value</label>
<div class="col-sm-6">
<input type="text" id="final_value" name="final_value" class="form-control" placeholder="final_value" required="required">
</div>
</div>
</div>
<div class="col-sm-6">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="value_table" class="table table-bordered table-colstriped table-hover display">
<thead>
<tr>
<th class="col-sm-3">ID</th>
<th class="col-sm-3">Users</th>
<th class="col-sm-3">Values</th>
<th class="col-sm-3">Values to be billed</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="dataTables_empty" valign="top" colspan="3">No data available in table</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Total Value</th>
<th>
<div name="total_value" id="total_value" class="text-right" style="margin-right:13px;">0</div>
</th>
<th>
<div name="value_to_be_billed" id="value_to_be_billed" class="text-right" style="margin-right:13px;">0</div>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
JQUERY：
jQuery("#value_table").dataTable({
"sAjaxSource": "db.php?mode=dataTable&id=" + jQuery("#id").val(),
"bDestroy": true,
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bSort": false,
"aoColumnDefs": [
{
"aTargets": [0],
"mRender": function(data, type, row) {
return data + '<input type="hidden" class="serial_no" name="serial_no[]" id="serial_no" value="' + row[4] + '">';
}
},
{
"aTargets": [1],
"mRender": function(data, type, row) {
return '<select name="user_id[]" id="user_id_' + row[4] + '_' + data + '" class="form-control user_id"><option value="">--- Select User ---</option></select>';
}
},
{
"aTargets": [2],
"mRender": function(data, type, row) {
return '<input type="text" class="form-control text-right" name=value[]" id="value" value="' + row[2] + '" onchange="jQuery(this).Sum(\'total_value\');">';
}
},
{
"aTargets": [3],
"mRender": function(data, type, row) {
return '<input type="text" class="form-control text-right" name="billing_value[]" id="billing_value" value="' + row[3] + '" onchange="jQuery(this).Sum(\'value_to_be_billed\');">';
}
}
]
});
这是我尝试清除控件的方式：
jQuery("#final_value").val("");
加载新表单时，将动态创建大约8行。第一列将包含1到8的ID。第二列将包含选择下拉列表，其中包含用户的名称（使管理员选择用户）。每行都有这个下拉列表（它是为每一行动态创建的）。第三列和第四列将包含空文本框，用户将在其中输入值（这些也是为每一行动态创建的）。
我的问题是，当加载新表单时，第一行（针对ID 1）将填充上一表单中提交的数据。像：
ID|Users|Values|Values to be billed
1 | Sai | 20 | 20
2 | | |
3 | | |
.
.
8 | | |
All others are empty.
我不知道如何清除（因为它在表格内）。
这是我试图清除它们的方式：
jQuery(".user_id").val("").trigger("change");//(clearing the dynamically drop-down inside the table)
jQuery("#value").val("");//(clearing the dynamically created text-box inside the table)
jQuery("#billing_value").val("");//(clearing the dynamically created text-box inside the table)
我不知道为什么在加载新表单时会显示该数据。代码有什么问题？我应该更改或添加什么来纠正它？