mercredi 21 juin 2017

How to do checkbox on clone row using JQuery

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