swett.bp swett.bp - 4 years ago 197
Javascript Question

How can i get the different time with jquery when add the new <tr>?

I use jQuery to add new

<tr>
line, i need to show current time of the click but it shows duplicate time like this
enter image description here

This is my code

<button type="button" class="add_line" id="add_line">+ Add More</button>
<table class="tbl_add" style="width: 40%; font-size: 16px; ">
<tr>
<th colspan="7">Add new code <input type="hidden" name="id" id="id" value="<?php echo $code->id;?>"></th>
</tr>
<tr>
<td>Date</td>
<td>No.Doc</td>
<td>Receive</td>
<td>Issue</td>
<td>Balance</td>
<td>Reference</td>
<td>Del</td>
</tr>
</table>







<script>
var i=1;
var t = '<?php echo date("H:i:s", time());?>';
$("#add_line").on('click',function(){
var data="<tr><input type='hidden' id='count' name='count' value='"+i+"'>"+
" <td><input type='text' id='time_"+i+"' name='time_"+i+"' class='frm_text' value='"+t+"' readonly/><input type='text' id='dt_"+i+"' name='dt_"+i+"' class='frm_text' value='<?php echo date("Y-m-d");?>' readonly/></td>" +
" <td><input type='text' id='no_doc_"+i+"' name='no_doc_"+i+"' class='frm_text' placeholder='No.Doc' /></td>"+
" <td><input type='text' id='receive_"+i+"' name='receive_"+i+"' class='frm_text' placeholder='Receive' /></td> "+
" <td><input type='text' id='issue_"+i+"' name='issue_"+i+"' class='frm_text' placeholder='Issue' /></td> "+
" <td><input type='text' id='balance_"+i+"' name='balance_"+i+"' class='frm_text' placeholder='Balance'/></td> " +
" <td><input type='text' id='ref_"+i+"' name='ref_"+i+"' class='frm_text_full' placeholder='Ref.Project' /></td>"+
" <td><a id='btnDelete' class='btnDelete'><img src='<?php echo site_url().'images/minus.png';?>' width='20px' height='20px' ></a></td></tr>";
$('.tbl_add').append(data);
i++;
});

$(".tbl_add").on('click','.btnDelete',function(){
$(this).closest('tr').remove();

});
</script>


How can i get the different time, please help me.

Answer Source

What happen is you are getting the date but each time you add the new table row then its not getting the current date and time , it does get the date and time stored in the variable when that page was loaded. so what you have to do is you have to create a function which can return you current date and time when you are about to add a new row in the table.

In your case what happen is its store the date and time once only when you run the code.

please check my code for more explanation.

<!Doctype html>
<html>
    <head>

    </head>

    <body style="margin-bottom: 100px;">
        <button type="button" class="add_line" id="add_line">+ Add More</button>
        <table class="tbl_add" style="width: 40%; font-size: 16px; ">
            <tr>
                <td>Date</td>
                <td>No.Doc</td>
                <td>Receive</td>
                <td>Issue</td>
                <td>Balance</td>
                <td>Reference</td>
                <td>Del</td>
            </tr>
        </table>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            var i = 1;

            //var current_time = new Date(); 

            function getCurrentDateTime(){
                var currentdate = new Date(); 
                    var datetime = currentdate.getDate() + "/"
                        + (currentdate.getMonth()+1)  + "/" 
                        + currentdate.getFullYear() + " "  
                        + currentdate.getHours() + ":"  
                        + currentdate.getMinutes() + ":" 
                        + currentdate.getSeconds();

                return datetime;
            }

            $("#add_line").on('click',function(){

                var date_time = getCurrentDateTime();

                var data="<tr><input type='hidden' id='count' name='count' value='"+i+"'>"+
                        " <td><input type='text' id='time_"+i+"' name='time_"+i+"' class='frm_text' value='"+date_time+"' readonly/><input type='text' id='dt_"+i+"' name='dt_"+i+"' class='frm_text' value='<?php echo date("Y-m-d");?>' readonly/></td>" +
                        " <td><input type='text' id='no_doc_"+i+"' name='no_doc_"+i+"' class='frm_text' placeholder='No.Doc' /></td>"+
                        " <td><input type='text' id='receive_"+i+"' name='receive_"+i+"' class='frm_text' placeholder='Receive' /></td> "+
                        " <td><input type='text' id='issue_"+i+"' name='issue_"+i+"' class='frm_text' placeholder='Issue' /></td> "+
                        " <td><input type='text' id='balance_"+i+"' name='balance_"+i+"' class='frm_text' placeholder='Balance'/></td> " +
                        " <td><input type='text' id='ref_"+i+"' name='ref_"+i+"' class='frm_text_full' placeholder='Ref.Project' /></td>"+ 
                        " <td><a id='btnDelete' class='btnDelete'><img src='<?php echo site_url().'images/minus.png';?>' width='20px' height='20px' ></a></td></tr>";
                $('.tbl_add').append(data);
                i++;
            });

            $(".tbl_add").on('click','.btnDelete',function(){
                $(this).closest('tr').remove();
            });
        </script>
    </body>
</html>

Let me know if you dont understand anywhere.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download