I'm trying to sum time (format hh:mm) from table with Moment.js.
Here is my js:
function timemanage(){
$('.lebih').each (function() {
if(moment('.lebih', 'hh:mm').isValid()){
var value = $(this).text();
if(!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
$('.jamlebih').val(sum);
}else{
alert("No");
}
});
}
$(document).ready(function(){
timemanage();
});
Here is my table:
<table class="table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>
<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[1602744] - RAHMAT </td>
<td>2016-08-28</td>
<td class="jammasuk">
08:55:00
</td>
<td class="jampulang">
16:03:00
</td>
<td class="lebih">Jam Kerja Kurang Dari 8 Jam</td>
</tr>
<tr>
<td>2</td>
<td>[1602744] - RAHMAT </td>
<td>2016-08-29</td>
<td class="jammasuk">
08:55:00
</td>
<td class="jampulang">
16:03:00
</td>
<td class="lebih">Jam Kerja Kurang Dari 8 Jam</td>
</tr>
<tr>
<td>3</td>
<td>[1602744] - RAHMAT </td>
<td>2016-08-30</td>
<td class="jammasuk">
08:55:00
</td>
<td class="jampulang">
16:03:00
</td>
<td class="lebih">Jam Kerja Kurang Dari 8 Jam</td>
</tr>
<tr>
<td>4</td>
<td>[1602744] - RAHMAT </td>
<td>2016-08-31</td>
<td class="jammasuk">
08:55:00
</td>
<td class="jampulang">
18:03:00
</td>
<td class="lebih">01:08</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />
</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly disabled class="ronya" />
</td>
</tr>
</tbody>
</table>
I have read the documentation but I can't see any part on how to check if the format hh:mm is valid. With my script above I always receive alert no.
Here is my fiddle.
I do not understand the text on your page, but I have done my best with your explanation. Here is my version: JSFiddle Please note I also changed one of the time boxes for testing purposes to add two values together.
As explained in the comments on your post, you need to give momentjs a value to parse from, that being $(this).text(). But momentjs is very forgiving in parsing. It will still parse the '8' out of your text. So you have to initialize your moment with 'true' as the third argument, like so: var thisMoment = moment(value, 'hh:mm', true);. This enables strict parsing, so moment will not parse the '8'.
It is also a decent idea to use moment's built-in .add(object) to add two moments together. Since we are only using hh:mm, I do var total = moment().startOf('day') to give us a clean slate of 12:00:00 to add to.
You were also trying to change the value of a class that didn't exist. You have $('.jamlebih').val(sum); when you actually want to get it via the input name (Or you can add the class yourself, if you want.) like so: $("input[name='jamlebih']")
Related
I'm really new to AJAX. How can I get the value of id, symbol, name etc. and put it in my table? I tried everything even JSON.stringify but I could not find this question anywhere so...
API output: [{"id":"90","symbol":"BTC","name":"Bitcoin","nameid":"bitcoin","rank":1,"price_usd":"9813.14","percent_change_24h":"10.04","percent_change_1h":"1.80","percent_change_7d":"5.56","market_cap_usd":"180330472483.63","volume24":"38774320414.79","volume24_native":"3951263.62","csupply":"18376421.00","price_btc":"1.00","tsupply":"18376421","msupply":"21000000"}]
Here is the HTML code.
Note: class="info" is just for testing. I will assign unique id's to the td's when it works correctly
<body>
<h1>
Live cryptocurrency data
</h1>
<table>
<tr>
<td>
Symbol
</td>
<td class="info">
-
</td>
</tr>
<tr>
<td>
Price USD
</td>
<td class="info">
-
</td>
</tr>
<tr>
<td>
24h Volume USD
</td>
<td class="info">
-
</td>
</tr>
<tr>
<td>
Market Cap USD
</td>
<td class="info">
-
</td>
</tr>
<tr>
<td>
Current supply
</td>
<td>
-
</td>
</tr>
<tr>
<td>
Total supply
</td>
<td>
-
</td>
</tr>
<tr>
<td>
Max supply
</td>
<td>
-
</td>
</tr>
<tr>
<td>
Percentage change 1h
</td>
<td>
-%
</td>
</tr>
<tr>
<td>
Percentage change 24h
</td>
<td>
-%
</td>
</tr>
<tr>
<td>
Percentage change 7d
</td>
<td>
-%
</td>
</tr>
</table>
<br>
<button>
Refresh Bitcoin data
</button>
</body>
Here is the Javascript code
$("button").click
(
function ()
{
$.ajax
(
{
url: "https://api.coinlore.net/api/ticker/?id=90",
method: "GET",
success: function(result)
{
$(".info").text(JSON.stringify(result));
}
}
)
}
);
Your API is returning an array with, in this case, 1 single object. Try result[0].id
Also, use dataType: 'json' in your Ajax options as per:
Parse JSON from JQuery.ajax success data
I'm trying to sum time with momentjs.
Here is my JavaScript function :
function all_time()
{
$(".aaa").each(function() {
$this = $(this);
var total = moment().startOf('day');
$this.find('.jmljam').each (function() {
var value = $this.find(this).val();
var thisMoment = moment(value, 'HH:mm', true);
if(thisMoment.isValid()){
total.add(thisMoment);
$this.find(".totalseluruhjam").val(total.format("HH:mm"));
}
});
});
}
And Here is My HTML Table
<form method="POST" action="http://localhost:84/payroll2/dinas_audit/claim/1105321/AD0000002">
<table class="aaa table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>
<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-01</td>
<td class="jammasuk">
07:00:00 </td>
<td class="jampulang">
23:00:00 </td>
<td class="lebih">08:00</td>
</tr>
<tr>
<td>2</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-02</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>3</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-03</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />
</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly class="ronya" />
</td>
</tr>
</tbody>
</table>
<table class="aaa table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>
<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-04</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
18:21:00 </td>
<td class="lebih">01:21</td>
</tr>
<tr>
<td>5</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-05</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
20:21:00 </td>
<td class="lebih">03:21</td>
</tr>
<tr>
<td>6</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-06</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
21:21:00 </td>
<td class="lebih">04:21</td>
</tr>
<tr>
<td>7</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-07</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>8</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-08</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>9</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-09</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />
</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly class="ronya" />
</td>
</tr>
</tbody>
</table>
<table class="table">
<tr>
<td> Total Jam Lebih : </td><td><input type="text" readonly="readonly" class='totalseluruhjam'/></td>
</tr>
<tr>
<td> Total RO Yang Di Dapat : </td><td><input type="text" readonly="readonly" class='totalseluruhro'/></td>
</tr>
</table>
</div>
<div class="box-footer">
<input value='submit' type='submit' class='btn btn-success pull-right claim'> </div>
</div>
</div>
</form>
As you can see from above. I have multiple tables. I'm able to sum .totalseluruhro` with this js
function all_ro()
{
var sum=0;
$(".aaa").each(function() {
$this = $(this);
sum += parseFloat($this.find('.ronya').val());
$('.totalseluruhro').val(sum);
})
}
But now i'm trying to sum every .jmljam and then set the result to .totalseluruhjam. I trying to sum jmljam with function all_time() but it's not working. I can't see any error from browser console. So, how to sum .jmljam ?
Please check my Fiddle https://jsfiddle.net/s9wfh9ye/23/
Give a shot with this.
function all_time()
{
var total = moment().startOf('day');
$(".aaa").each(function() {
$this = $(this);
$this.find('.jmljam').each (function() {
var value = $this.find(this).val();
var thisMoment = moment(value, 'HH:mm', true);
if(thisMoment.isValid()){
total.add(thisMoment);
}
});
});
$(".totalseluruhjam").val(total.format("HH:mm"));
}
and here is the updated fiddle https://jsfiddle.net/s9wfh9ye/24/
This is what i have right now:
This is the table:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</table>
This is the javascipt
<script>
function hello(){
var r = document.getElementById("trId1").innerHTML;
alert(r);
}
</script>
The JavaScript gets E100 when its the first row is clicked which is correct but when E200 row is clicked it still shows E100, how would i get E200 and so on when there is more data? Is there a javascript only solution
To start, you can't have two Id's on the page that are the same as that is invalid HTML5 and will cause errors in some browsers. The reason why you're getting what you're getting is because when looking for an ID, most browsers only look for one occurrence of an ID (because that is precisely what valid HTML is, 1 unique id per page). So to fix up your HTML code and you may also want to have a header for your table:
<table border='1'>
<thead>
<tr>
<th>
Employee Code
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
<tr class='display' onclick='hello(1);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(2);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</tbody>
</table>
Your best bet is to getElementsByClassName function and traverse the array to the one you want. (general change, code) Assuming you can't use JQuery at all for some reason:
<script>
function hello(rowClickedNumber){
var RowClicked = document.getElementsByClassName("trId1");
var r = RowClicked[0].innerHTML;
alert(r); //E100
var r = RowClicked[1].innerHTML;
alert(r); //E200
var r = RowClicked[rowClickedNumber].innerHTML;
alert(r);
}
</script>
However, an even simpler solution would be to use JQuery and would limit browser inconsistencies. After the document loads:
$(body).on("click", "tr", function(){
var getData =$(this).children(".trId1").getHTML();
console.log(getData);
});
Note: this is to allow when you inevitably add more items to the table (hence the reason why the code to get a child element of a row).
*EDIT: added the note
**EDIT: fixed the spelling and grammer
* EDIT: fixed the javascript function.
I have a solution for this. Please check the code and fiddle link below. Let me know if you have any question.
Fiddle
HTML:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
</table>
JavaScript:
function hello(obj){
alert(obj.childNodes[1].innerText); //The first child being a text node.
}
I have my html table: this is part of it
<tbody id="summaryBody">
<tr class="summaryRow">
<td class="summaryPerson" colspan="2">
Super Man
</td>
<td class="summaryFromDate">
11/21/2013
</td>
<td class="summaryToDate">
11/21/2013
</td>
<td class="summaryOriginalRecords">
1
</td>
<td class="summaryOriginalHours">
2.00
</td>
<td class="summaryExcludedHours">
0
</td>
<td class="summaryTotalHours">
2.00
</td>
</tr>
<tr class="summaryRow">
<td class="summaryPerson" colspan="2"> … </td>
<td class="summaryFromDate"> … </td>
<td class="summaryToDate"> … </td>
<td class="summaryOriginalRecords"> … </td>
<td class="summaryOriginalHours"> … </td>
<td class="summaryExcludedHours"> … </td>
<td class="summaryTotalHours"> … </td>
</tr>
<tr class="summaryRow">
<td class="summaryPerson" colspan="2"> … </td>
<td class="summaryFromDate"> … </td>
<td class="summaryToDate"> … </td>
<td class="summaryOriginalRecords"> … </td>
<td class="summaryOriginalHours"> … </td>
<td class="summaryExcludedHours"> … </td>
<td class="summaryTotalHours"> … </td>
</tr>
</tbody>
I want to get everything that is inside tbody element with all attributes and texts. How to do this using jquery?
I know only way when I can loop through each tr
$('tbody > tr').each()
but in this case I will need to select every attr and class and text and etc... It seems pretty hard. Is it any good way to get all elements? Maybe collection of tr element as text?
Help please=)
You can get the html contents of the tbody using .html()
var html = $('tbody').html();//using the id $('#summaryBody').html()
It's pretty simple:
$("tbody").html();
How can I change a page with this html code :
<tr>
<td nowrap title="7884">Ontem foi dia de</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td align="right">6,0</td></tr>
<tr>
to this one using greasemonkey :
<tr>
<td title="7884" nowrap="nowrap">ontem foi dia de</td>
<td> </td>
<td title="aprovadissimo" align="center" bgcolor="#ff8888">A</td>
<td title="Treze" align="center" bgcolor="#88ff88">13</td>
<td> </td>
<td bgcolor="#88ff88">Aprovado</td>
<td align="right">6,0</td></tr>
<tr>
have a look at http://diveintogreasemonkey.org/ and see about writing GreaseMoney Scripts
How are you determining which table cells should have which certain values in them? What are the rules you're going to have for this?