I have a table in html, which are include some data, but I have a problem, which is my checkboxs are not being clone after click on add button. If I checked the 1st Row (YES), then I checked 2nd Row (NO) or (YES), the 1st Row is unchecked if I checked the 2nd Row. Here is my table that have checkbox and addbutton in HTML
HTML
<table id="table_line" border="1" rules="all" style="display: inline-block;
width: 100%; align:center">
<tbody>
<tr>
<th scope ="col" style="font-size:14px;"><center>Request
Type Has GST?</center></th>
<th scope ="col" colspan="2" style="font-size:14px;">
<center>Actions</center></th>
<tr>
<tr id="rowId_1">
<td style="width:10%; align:center">
<?php
$result = $db->get_results("SELECT * FROM site_gst");
foreach ((Array) $result as $r){ ?>
<input type="checkbox" name="line_description2[]" id="line_description2_1"
required value="<?php echo $r->description ?>|<?php echo $r->is_gst_applicable ?>" class="subject-list"><?php echo $r->description;?>
<?php } ?>
</td>
<td><img src="img/trash.png" id="line_delete_1" /></td>
<td style="font:normal 12px agency, arial; color:blue;
text-decoration:underline; cursor:pointer;"
onclick="addMoreRows(this.form);"><img src="img/add.png"/>
</td>
</tr>
</tbody>
</table>
The table should looks like THIS Here is my Query
QUERY
(function($){
// code below is for calculation
jQuery(document).on("change", "[id^='line_description2_']", function() {
var line_desc_id = jQuery(this).attr("id");
var split_id = line_desc_id.split("_"); // id has value line_description_x. so value of x is at index 2
var line_desc_val = jQuery(this).val();
var split_val = line_desc_val.split("|");
if( split_val[0] == "YES" ){
jQuery("#line_gstflag_"+split_id[2]).val("1");
}
else{
jQuery("#line_gstflag_"+split_id[2]).val("0");
}
});
})(jQuery);
var rowCount = 1;
function addMoreRows(frm) {
var row_id = jQuery("#table_line tbody>tr:last").attr("id");
var split = row_id.split("_");
var new_row_id = parseInt(split[1]) + parseInt(1);
// clone the last row & reset rowId
jQuery("#table_line tbody>tr:last-
child").clone(true).insertAfter("#table_line tbody>tr:last-child");
jQuery("#table_line tbody>tr:last-child").attr("id",
"rowId_"+new_row_id);
//reset id
jQuery("#table_line tbody>tr:last-child td:eq(0) #line_description2_"+split[1]).attr("id", "line_description2_"+new_row_id);
jQuery("#table_line tbody>tr:last-child td:eq(1) #line_delete_"+split[1]).attr("id", "line_delete_"+new_row_id);
//reset value of each field
jQuery("#table_line tbody>tr:last-child #line_description2_"+new_row_id).val("PleaseSelect");
}
I also has make a script to perform only one checkbox being checked per row. The Problem is, when I click on ADD button, the checkbox is not cloning. For example, 1st Row I choose Yes, 2nd Row I choose No. But the 1st Row checked is unchecked if I choose checked on 2nd Row. Please Help.
Aucun commentaire:
Enregistrer un commentaire