javascript - Incrementing a number in a <td> with JQuery -


i have working html table, see there empty <th> , in corresponding <td>, there "1". i'm trying figure out, how increment 1 2, etc.. whenever new table being generated.

var numrows = 2,      ti = 5,      tablecount = 1;    window.standby = function() {    var sum = 0;    $(".standby").each(function(index, stand) {      sum += parsefloat($(stand).val());    })      $(".grandtotal").val(sum)  }    function calculate() {    var tr = $(this).closest('tr');      var hours = parseint($(".time2", tr).val().split(':')[0], 10) - parseint($(".time1", tr).val().split(':')[0], 10);    if (hours < 0) hours = 24 + hours;    $(".hours", tr).val(hours);      if (hours >= 4) $(".standby", tr).val("1");    if (hours <= 4) $(".standby", tr).val("0.5");    //if (hours==4 && hours<8) $(".standby").val("1");      if (hours >= 8 && hours <= 12) $(".standby", tr).val("1.5");      if (hours > 12) $(".standby", tr).val("1.5");  }    $('#table').on('change', ".time1,.time2", calculate);  $('#table').find(".time1").trigger('change')    window.addtime = function() {    tablecount++;    $('#timetable').clone().attr('id', "timetable" + tablecount).appendto('#table');    $('#timetable' + tablecount).find("input").val("");  };    $(document).on('click', 'button.removetime', function() {    var closesttable = $(this).closest('table');    if (closesttable.attr('id') != "timetable") {      closesttable.remove();    }    tablecount--;    return false;  });
.tg {    border-collapse: collapse;    border-spacing: 0;  }    .tg td {    font-family: arial, sans-serif;    font-size: 14px;    padding: 10px 5px;    border-style: solid;    border-width: 1px;    overflow: hidden;    word-break: normal;  }    .tg th {    font-family: arial, sans-serif;    font-size: 14px;    font-weight: normal;    padding: 10px 5px;    border-style: solid;    border-width: 1px;    overflow: hidden;    word-break: normal;  }    .tg .tg-yw4l {    vertical-align: top  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <h1>time format in 24h</h1>    <div id="table">    <table id="timetable" class="tg">      <tr>        <th class="tg-yw41"></th>        <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>1</td>        <td class="tg-yw4l"><button class="removetime">remove time</button></td>        <td class="tg-yw4l">          <input class="time1" value="" placeholder="enter start time" />        </td>        <td class="tg-yw4l">          <input class="time2" value="" placeholder="enter 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>  </div>    <!-- example of has 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-ywl"><input class="time1" value="" placeholder="enter start time" /></td>      <td class="tg-yw4l"><input class="time2" value="" placeholder="enter 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="" readonly="" />  <br>  <button onclick="addtime();">add time</button>  <br>  <button onclick="standby();">calculate total standby hours</button>

i have working jsfiddle right here: http://jsfiddle.net/3q4v7q07/8/

thank in advance kind help!

as comment, after removing row , decreasing index, check less 1.

if less set 1 default.

if (tablecount < 1) {     tablecount = 1; } 

var numrows = 2,    ti = 5;  var tablecount = 1;  var index = 1;    window.standby = function() {    var sum = 0;    $(".standby").each(function(index, stand) {      sum += parsefloat($(stand).val());    })      $(".grandtotal").val(sum)  }    function calculate() {    var tr = $(this).closest('tr');      var hours = parseint($(".time2", tr).val().split(':')[0], 10) - parseint($(".time1", tr).val().split(':')[0], 10);    if (hours < 0) hours = 24 + hours;    $(".hours", tr).val(hours);      if (hours >= 4) $(".standby", tr).val("1");    if (hours <= 4) $(".standby", tr).val("0.5");    //if (hours==4 && hours<8) $(".standby").val("1");      if (hours >= 8 && hours <= 12) $(".standby", tr).val("1.5");      if (hours > 12) $(".standby", tr).val("1.5");        }  $('#table').on('change', ".time1,.time2", calculate);  $('#table').find(".time1").trigger('change')      window.addtime = function() {    tablecount++;    $('#timetable').clone().attr('id', "timetable" + tablecount).appendto('#table');    $('#timetable' + tablecount).find("input").val("");    index++;    $('#timetable' + tablecount + ' .aa').html(tablecount);    };      $(document).on('click', 'button.removetime', function() {    var closesttable = $(this).closest('table');    if (closesttable.attr('id') != "timetable") {      closesttable.remove();    }    tablecount--;    if (tablecount < 1) {      tablecount = 1;    }    return false;  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <h1>    time format in 24h  </h1>    <div id="table">    <table id="timetable" class="tg">      <tr>        <th class="tg-yw41"></th>        <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="aa">1</td>        <td class="tg-yw4l"><button class="removetime">remove time</button></td>          <td class="tg-yw4l">          <input class="time1" value="" placeholder="enter start time" />        </td>        <td class="tg-yw4l">          <input class="time2" value="" placeholder="enter 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>  </div>                  <!--               //example of has 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-ywl"><input class="time1" value="" placeholder="enter start time"/></td>      <td class="tg-yw4l"><input class="time2" value="" placeholder="enter 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="" readonly="" />  <br>  <button onclick="addtime();">add time</button>  <br>  <button onclick="standby();">calculate total standby hours</button>


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more