在使用javascript的过程中,我是一个新手,我很难将复选框中的值附加到带有输入框的表格单元格中。当我选中其中一个复选框(fee_type)时,该表将由数据库中的所有费用类型填充,并且必须在金额和罚款表中填充金额表(请参见实际视图表格的随附图像)。 ..请帮助我解决这个问题。
非常感谢您。
-表单视图-
<div class="form-group">
<label>Grade Level</label>
<select id="class_id" name="class_id" class="form-control" >
<option value=""><?php echo $this->lang->line('select'); ?></option>
<?php foreach ($classlist as $class) { ?>
<option value="<?php echo $class['id'] ?>"
<?php if (set_value('class_id') == $class['id']) {
echo "selected =selected";
}
?>><?php echo $class['class'] ?></option>
<?php
$count++;
}
?>
</select>
<span class="text-danger"><?php echo form_error('class_id'); ?></span>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Fee Group Name</label>
<select autofocus="" id="fee_groups_id" name="fee_groups_id" class="form-control" >
<option value=""><?php echo $this->lang->line('select'); ?></option>
</select><span class="text-danger"><?php echo form_error('fee_groups_id'); ?></span>
</div>
<div class="form-group">
<label>amount</label>
<input id="amount" name="amount" placeholder="" type="text" class="form-control" value="<?php echo set_value('amount'); ?>" />
<span class="text-danger"><?php echo form_error('amount'); ?></span>
</div>
<div class="form-group">
<label>Penalty</label>
<input id="penalty" name="penalty" placeholder="" type="text" class="form-control"/>
<span class="text-danger"><?php echo form_error('penalty'); ?></span>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputEmail1">Fee type</label>
<?php foreach ($feetypeList as $feetype) { ?>
<div class="checkbox" >
<label style="display: inline-block; max-height: 25px; list-style: none; float: left; padding-top: 5px; width: 130px; margin-right: 40px;">
<input id="chkAdd" type="checkbox" name="feetype_id" value="<?php echo $feetype['id'] ?>" <?php echo set_checkbox('feetype', $feetype['id']); ?> ><?php echo $feetype['type'] ?>
</label>
</div>
<?php } ?>
<span class="text-danger"><?php echo form_error('feetype_id'); ?></span>
</div>
-Javascript-
<script type="text/javascript">
$(function () {
$(document).on("click", "#chkAdd", function () {
var lenght_div = $('#TextBoxContainer .app').length;
var div = GetDynamicTextBox(lenght_div);
$("#TextBoxContainer").append(div);
});
$(document).on("click", "#btnGet", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
});
});
function GetDynamicTextBox(value) {
var row = "";
$('#chkAdd:checked').each(function(){
row += '<tr class="tableGroup">';
<?php foreach ($feetypeList as $feetype) { ?>
row += '<td class="mailbox-name"><input class="form-control" name="feetype_id" value="<?php echo set_value('feetype_id', $feetype['type']); ?>"/></td>';
row += '<td class="mailbox-name"><input class="form-control" name="startDate" value="<?php echo set_value('startDate', $feetype['start_date']); ?>"/></td>';
row += '<td class="mailbox-name"><input class="form-control" name="endDate" value="<?php echo set_value('startDate', $feetype['end_date']); ?>"/></td>';
row += '<td class="mailbox-name"><input id="amountCell" name="amountCell" placeholder="" type="text" class="form-control"/></td>';
row += '<td class="mailbox-name"><input id="penaltyCell" name="penaltyCell" placeholder="" type="text" class="form-control"/></td>';
row += '</tr>';
<?php
$count++;
}
?>
});
row = row.substring();
$(".tableGroup").val(row);
return row;
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".feemaster_form").submit(function (e)
{
$("#TextBoxContainer").html("");
$.ajax(
{
url: formURL,
type: "POST",
data: postData,
dataType: 'json',
success: function (data, textStatus, jqXHR)
{
if (data.st === 1) {
$.each(data.msg, function (key, value) {
$('.' + key + "_error").html(value);
});
} else {
var response = data.msg;
if (response && response.length > 0) {
for (i = 0; i < response.length; ++i) {
var feetype_id = response[i].feetype_id;
var row_id = response[i].id;
appendRow(feetype_id, row_id);
}
} else {
appendRow(0, 0, 0);
}
$('#chkAdd');
}
},
error: function (jqXHR, textStatus, errorThrown)
{
}
});
e.preventDefault();
});
});
function appendRow() {
var value = $('#TextBoxContainer .app').length;
var row = "";
row += '<td class="mailbox-name"><input class="form-control" name="feetype_id" value="<?php echo set_value('feetype_id', $feetype['type']); ?>"/></td>';
row += '<td class="mailbox-name"><input class="form-control" name="startDate" value="<?php echo set_value('startDate', $feetype['start_date']); ?>"/></td>';
row += '<td class="mailbox-name"><input class="form-control" name="endDate" value="<?php echo set_value('startDate', $feetype['end_date']); ?>"/></td>';
row += '<td class="mailbox-name"><input id="amountCell" name="amountCell" placeholder="" type="text" class="form-control"/></td>';
row += '<td class="mailbox-name"><input id="penaltyCell" name="penaltyCell" placeholder="" type="text" class="form-control"/></td>';
$count++;
row += '</tr>';
$("#TextBoxContainer").append(row);
}
</script>