CODEWITHSUNDEEP
javascriptjqueryhtmlcss
David
David

Reputation: 97

Generate another HTML table in JQuery to type in more hours to be calculated

I have a table in HTML where the user puts in their start time and their end time which calculates the hours in total. If the hours in total ranges between 0-4, the "standby hours" text field will display the value of 0.5, if the "hours in total" ranges between 4-8, the "standby hours" will display 1 and finally, if the "hours in total" ranges between 8-12, the "standby hours" will display 1.5.

Now, this all works perfectly.

But what I would like to do from there is that whenever you click "Add time", a second table of "Start time, end time, hours in total and standby hours" generates (I have put them in comments to show you what I would like).

And finally, I would like to add each "Standby hours" that have been generated throughout the way and put the result in the text field: "Total standby hours".

Also, whenever I put in the Start time and End time data of the first table, it seems that the generated table (the one I created manually in the comments) happens to calculate whatever I type in my first table. The iteration of the table doesn't seem to work.

Here is my HTML code:

<h1>
Time format: 1:00 = 1 PM / 01:00 = 1 AM
</h1>


<table class="tg">
  <tr>
    <th class="tg-yw41"></th>
    <th class="tg-yw4l">Start time</th>
    <th class="tg-yw4l">End time</th>
    <th class="tg-yw4l">Hours in total</th>
    <th class="tg-yw4l">Standby hours</th>
  </tr>
  <tr>
  <td class="tg-yw4l">1</td>
    <td class="tg-yw4l"><input class="Time1" value="" placeholder="Enter your start time"/></td>
    <td class="tg-yw4l"><input class="Time2" value="" placeholder="Enter your end time"/></td>
    <td class="tg-yw4l"><input type="text" class="Hours" value="0" readonly=""/></td>
    <td class="tg-yw4l"><input type="text" class="Standby" value="0" readonly=""/></td>
  </tr>
</table>











<!--               //EXAMPLE OF WHAT HAS TO BE GENERATED
<table class="tg">
  <tr>
    <th class="tg-yw41"></th>
    <th class="tg-yw4l">Start time</th>
    <th class="tg-yw4l">End time</th>
    <th class="tg-yw4l">Hours in total</th>
    <th class="tg-yw4l">Standby hours</th>
  </tr>
  <tr>
  <td class="tg-yw4l">2</td>
    <td class="tg-yw4l"><input class="Time1" value="" placeholder="Enter your start time"/></td>
    <td class="tg-yw4l"><input class="Time2" value="" placeholder="Enter your end time"/></td>
    <td class="tg-yw4l"><input type="text" class="Hours" value="0" readonly=""/></td>
    <td class="tg-yw4l"><input type="text" class="Standby" value="0" readonly=""/></td>
  </tr>
</table>
-->

<caption>Total standby hours</caption>&nbsp;<input class="grandtotal" value=""/>
<br>
<button>Add Time</button><br>
<button>Remove Time</button>

And my JQuery:

var numRows = 2, ti = 5; 

 $(function () {
     function calculate() {
         var hours = parseInt($(".Time2").val().split(':')[0], 10) - parseInt($(".Time1").val().split(':')[0], 10);
         if(hours < 0) hours = 24 + hours;
         $(".Hours").val(hours);
         if (hours>=4) $(".Standby").val("1");
          if (hours<=4) $(".Standby").val("0.5");
         //if (hours==4 && hours<8) $(".Standby").val("1");

        if (hours>=8 && hours<=12) $(".Standby").val("1.5");

        if (hours>12) $(".Standby").val("1.5");



     }
     $(".Time1,.Time2").change(calculate);
     calculate();


 });

 var standby1 = $(this).find('input.Standby').val();
        var standby2 = $(this).find('input.Standby').val();



  /*var standbytotal = (standby); //CALCULATE THE TOTAL OF STANDBY HOURS THAT APPEAR
        $(this).find('input.grandtotal').val(standbytotal ? standbytotal : "");*/

Now of course I have made a JSFiddle right here: http://jsfiddle.net/44NCk/508/

Thank you all for your help!

Upvotes: 1

Views: 285

Answers (3)

Marc-Andr&#233; Therrien
Marc-Andr&#233; Therrien

Reputation: 549

For this case, I would use the jquery clone function. it does pretty much everything for you.

I updated your jsfiddle to give you a quick example.

basically this:

 window.addTime = function () {
    $('#timeTable').clone().attr('id', "timeTable2").appendTo('#table');
 };

You have to make sure the ids are different in the attr function. incrementing a number and adding it to the timeTable id would work.

see this link for more info.

Upvotes: 1

user4490801
user4490801

Reputation:

When I'm generating tables dynamically, I often find the following trick helpful:

<div id="table_div"></div>

and then use javascript to insert the table into the div.

first_cell_content="<input placeholder='whatever input you want here'>";
table_html = "<table>"+
              "<tr>"+
                 "<td>"+first_cell_content+"</td>"
               "</tr>"+
             "</table>";
document.getElementById("table_div").innerHTML = table_html;

Upvotes: 0

Vinko Vorih
Vinko Vorih

Reputation: 2202

Possible duplicate of Is there a best practice for generating html with javascript

You just have to create .append method which is explained in answer above.

Hope it will help you!

Upvotes: 0

Related Questions