var tada =document.querySelectorAll("#element > table tr:nth-child(n+0) td:nth-child(1)")[0].outerText
this gains first
var tada =document.querySelectorAll("#element > table tr:nth-child(n+0) td:nth-child(1)")[1].outerText
This kind of text how can it be changed to fit all the values?
How do I change [0].outerText
0 to all numbers?
or how to get only the first number from the picture (console.log)
They just need to get those first numbers the code of the page looks like this
http://jsfiddle.net/8cuagzjd/1/
and yet how to calculate all array?
This is my approach,
There is a NaN element that I didn´t know if you want to remove or remain there.
The code split the td tag and get the last part (after the div). Then just parseInt() the value and you will get the number.
As a result you will get an array with the numbers.
//just commented this for tests purpose
//var tada = Array.from(document.querySelectorAll("#element > table tr:nth-child(n+0) td:nth-child(1)"));
var tada = Array.from(document.querySelectorAll("table tr:nth-child(n+0) td:nth-child(1)"));
let numbers = [];
tada.forEach(e => {
let num = parseInt(e.innerHTML.split("</div>")[1]);
//to avoid adding Nan
if (!isNaN(num)) numbers.push(num);
});
let sum = numbers.reduce((a, b) => a + b, 0);
console.log(sum);
<div class="trainqueue_wrap" id="trainqueue_wrap_barracks">
<table class="vis" style="width: 100%">
<tbody>
<tr>
<th style="width: 25%">Výcvik</th>
<th>Trvání</th>
<th>Zhotovení</th>
<th style="width: 150px">Ukončení *</th>
<th style="background:none !important; width: 2%"></th>
</tr>
<tr class="lit">
<td class="lit-item">
<div class="unit_sprite unit_sprite_smaller sword"></div>
19 Šermířů
</td>
<td class="lit-item"><span class="">0:00:37</span></td>
<td class="lit-item">dnes v 00:42:11 hodin</td>
<td class="lit-item"><a class="btn btn-cancel" onclick="return TrainOverview.cancelOrder(1645)" href="/">Storno</a></td>
<td class="lit-item" style="background:none !important;"></td>
</tr>
</tbody>
<tbody id="trainqueue_barracks">
<tr class="sortable_row" id="trainorder_0">
<td class="">
<div class="unit_sprite unit_sprite_smaller spear"></div>
20 Kopiníků
</td>
<td>0:00:32</td>
<td>dnes v 00:42:43 hodin</td>
<td><a class="btn btn-cancel" onclick="return TrainOverview.cancelOrder(1646)" href="/">Storno</a></td>
</tr>
<tr class="sortable_row" id="trainorder_1">
<td class="">
<div class="unit_sprite unit_sprite_smaller spear"></div>
20 Kopiníků
</td>
<td>0:00:32</td>
<td>dnes v 00:43:15 hodin</td>
<td><a class="btn btn-cancel" onclick="return TrainOverview.cancelOrder(1647)" href="/">Storno</a></td>
</tr>
<tr>
<td colspan="3"> </td>
<td class="lit-item">
<a class="evt-confirm btn btn-cancel nowrap" data-confirm-msg="Opravdu chceš zrušit veškerou rekrutaci?" href="">Zrušit vše</a></td>
<th style="background:none !important;"></th>
</tr>
</tbody>
</table>
</div>
Related
I have this counter for word occurrence in the textarea. The problem is, I have a lot of items in the table, and so it can be distracting to include the zero results.
So what I'm hoping to achieve is, if the user checks the checkbox, it will not show the zero results anymore (preferably the whole row)..
Please see the code so far:
let textarea = $('#textarea3');
textarea.on('keyup', _ => counting());
function counting() {
var searchText = $('#textarea3').val();
let words = [];
words['1 sample'] = '#one';
words['2 sample'] = '#two';
words['3 sample'] = '#three';
words['4 sample'] = '#four';
words['5 sample'] = '#five';
words['6 sample'] = '#six';
for (const word in words) {
var outputDiv = $(words[word]);
outputDiv.empty();
let count = searchText.split(word).length - 1;
searchText = searchText.replaceAll(word,'');
outputDiv.append('<a>' + count + '</a>');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox">
<label> Don't show zero results</label><br>
<button onclick="counting();">Count</button>
<table>
<thead>
<tr>
<th scope="col">Items</th>
<th scope="col">Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 sample</td>
<td><a id="one"></a></td>
</tr>
<tr>
<td>2 sample</td>
<td><a id="two"></a></td>
</tr>
<tr>
<td>3 sample</td>
<td><a id="three"></a></td>
</tr>
<tr>
<td>4 sample</td>
<td><a id="four"></a></td>
</tr>
<tr>
<td>5 sample</td>
<td><a id="five"></a></td>
</tr>
<tr>
<td>6 sample</td>
<td><a id="six"></a></td>
</tr>
</tbody>
</table>
<textarea id="textarea3" rows="5">
1 sample
2 sample
3 sample
5 sample
</textarea>
If the checkbox isn't checked, it should function as is and still show all results.
I've seen this post but I'm not really sure how to implement it to my own project. Show or hide table row if checkbox is checked
Thank you in advance for any help.
Consider the following.
$(function() {
var textarea = $('#textarea3');
var words = [];
$("table tbody tr").each(function(i, row) {
words.push({
term: $("td:eq(0)", row).text().trim(),
rel: "#" + $("a", row).attr("id"),
count: 0
});
});
function count() {
var searchText = textarea.val();
$.each(words, function(i, word) {
if (searchText.indexOf(word.term) >= 0) {
var re = new RegExp('(' + word.term + ')', 'gi');
word.count = searchText.match(re).length;
$(word.rel).html(word.count);
} else {
word.count = 0;
if (!$("#noShowZero").is(":checked")) {
$(word.rel).html(word.count);
} else {
$(word.rel).html("");
}
}
});
}
textarea.keyup(count);
$("#count-btn, #noShowZero").click(count);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="noShowZero" type="checkbox">
<label> Don't show zero results</label><br>
<button id="count-btn">Count</button>
<table>
<thead>
<tr>
<th scope="col">Items</th>
<th scope="col">Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 sample</td>
<td>
<a id="one"></a>
</td>
</tr>
<tr>
<td>2 sample</td>
<td>
<a id="two"></a>
</td>
</tr>
<tr>
<td>3 sample</td>
<td>
<a id="three"></a>
</td>
</tr>
<tr>
<td>4 sample</td>
<td>
<a id="four"></a>
</td>
</tr>
<tr>
<td>5 sample</td>
<td>
<a id="five"></a>
</td>
</tr>
<tr>
<td>6 sample</td>
<td>
<a id="six"></a>
</td>
</tr>
</tbody>
</table>
<textarea id="textarea3" rows="5">
1 sample
2 sample
3 sample
5 sample
</textarea>
When the User:
Enters text in the textbox
Clicks the checkbox
Clicks the Button
then count function is executed.
Count will review all the words and look for specific keywords. A count of them is also retained, as well as element relationship to show that count.
Using Regular Expressions, we can search for the words in the text and count them using .match(). It returns an Array of the matches. You could also use .replace(), to remove them.
This question already has answers here:
How to get text node after element?
(4 answers)
Closed 3 years ago.
I have a table like so:
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>
I am currently using jquery get extract all the names from the data attributes.
However, I also need to see how many times it's referenced (x3, x2 or x1) which are standalone text nodes.
Here is my loop:
jQuery(".child-row123 a[data-name]").each(function(){
var dataname = jQuery(this).data('name');
//Alert
if(!jQuery.isNumeric(dataname)){
alert(dataname);
}
});
Using jQuery, is it possible to get the data-name alongside the text node of x3, x2 or x1? I'm trying figure it out logically and I'm guessing I need to look at the end of each anchor tag?
Try using the DOM function .nextSibling to pick the next node and use nodeValue to get the "referenced (x3, x2 or x1)"
Source: How to get text node after element?
jQuery(".child-row123 a[data-name]").each(function() {
var dataname = jQuery(this).data('name');
var nodetext = jQuery(this)[0].nextSibling.nodeValue;
//Alert
if (!jQuery.isNumeric(dataname)) {
console.log("Data: " + dataname + "\nreferenced: " + nodetext);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>
You can get the info with .nextSibling
jQuery(".child-row123 a[data-name]").each(function() {
var name = this.getAttribute("data-name"), // as the name is a string we don't really need the magic from jQuerys .data()
refs = this.nextSibling.textContent;
console.log(name, refs);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>
What I would do and what you could do if possible. Is wrap your texts inside a span and then get the text with next(). With this solution, instead of having floating texts you have a more structured html.
$(".child-row123 a[data-name]").each(function() {
var dataname = $(this).data('name');
//Alert
if (!$.isNumeric(dataname)) {
console.log(dataname + " " + $(this).next().text());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> <span>x3</span><br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> <span>x2</span><br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> <span>x1</span><br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> <span>x3</span><br>
</td>
</tr>
</tbody>
</table>
I have a block of HTML like
<tbody>
<tr id="first-score-row">
<td>Steve Ballmer</td>
<td>1923</td>
<td class="hide-under-480px">10/11/2015 9:21:39 PM</td>
</tr>
<tr>
<td colspan="3">
<p><a class="btn btn-primary btn-lg show-fewer-or-more-scores" id="show-more-scores">Click to See More</a></p>
</td>
</tr>
<tr class="hidden">
<td>Michael Jackson</td>
<td>300</td>
<td class="hide-under-480px">10/6/2015 2:37:30 PM</td>
</tr>
<tr class="hidden">
<td>Weird Al</td>
<td>180</td>
<td class="hide-under-480px">10/10/2015 1:20:38 AM</td>
</tr>
<tr class="hidden">
<td>Obama smokes cigs</td>
<td>60</td>
<td class="hide-under-480px">10/5/2015 10:28:37 PM</td>
</tr>
<tr class="hidden">
<td>Donald Trump</td>
<td>60</td>
<td class="hide-under-480px">10/5/2015 10:28:02 PM</td>
</tr>
<tr class="hidden">
<td colspan="3">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p><a class="btn btn-primary btn-lg show-fewer-or-more-scores" id="show-fewer-scores" target="_blank">See Fewer Scores</a></p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>See <u>All</u> Scores</p>
</div>
</div>
</td>
</tr>
</tbody>
and I'm trying to make an event that reveals or hides all the rows besides the first one (which will always be revealed) in animated fashion, 1/5th of a second between each one being revaled. My attempted event handler is
// click function for the "See More Scores" and "See Fewer Scores" buttons
$('.show-fewer-or-more-scores').click(function ( )
{
var otherRows = $(this).closest('tbody').children('tr:not(#first-score-row)');
for (var k = 0, n = otherRows.length; k < n; ++k)
{
setTimeout(function () {
otherRows.eq(k).toggleClass('hidden');
}, k * 200 );
}
});
and for some reason it is not working. There are no errors printed to the console, but nothing happens, the class hidden is not toggled. What am I doing wrong here?
Live example here
To target All rows but first one use the :gt(0) selector:
jsBin demo
var $rowsNotFirst = $("table tbody tr:gt(0)");
var $scoresBtn = $(".show-fewer-or-more-scores");
$scoresBtn.click(function(){
$rowsNotFirst.toggleClass("hidden");
});
To add the timeout:
jsbin demo
$scoresBtn.click(function(){
$rowsNotFirst.filter(function(idx, el){
setTimeout(function(){
$(el).toggleClass("hidden");
}, 300*idx); // 300 * element index
});
});
I replaced your for loop with a jQuery each function.
otherRows.each(function(i){
setTimeout(function () {
otherRows.eq(i).toggleClass('hidden');
}, i * 200 );
});
Dont forget the .hidden class, something like:
.hidden {display:none}
Other than that it works fine.
https://jsfiddle.net/partypete25/nvbraokh/20/embedded/result/
The actual problem is here.
setTimeout(function () {
otherRows.eq(k).toggleClass('hidden');
}, k * 200 );
The value of k will be equal to the value of n once the for loop is completed. So everytime when this line is called, the k value will be same, but no table row exists with that index value.
You have to get the table row element and then add the method toggleClass to it.
I've got this problem:
I have a table in HTML, that I want to edit via Javascript.
The table info is of rooms with either value 0 or 1.
I have two buttons that can change a cell, that can set the value to 1 or 0, but I want a function connected to one button, that changes the value, as 1 gets to 0, and 0 gets to 1.
One solution I find is to give each cell an ID and change it, and the other one is to use row/cell from the table.
<table id="table1">
<table border="1" cellpadding="1" cellspacing="3">
<tr>
<td> Room </td>
<td> Status </td>
</tr>
<tr>
<td> r1 </td>
<td id="room1"> 0 </td>
</tr>
<tr>
<td> r2 </td>
<td> 0 </td>
</tr>
<tr>
<td> r3 </td>
<td> 1 </td>
</tr>
Currently I've tried:
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
<button type="button" onclick="metode2()">Room 1 => 0</button>
<script>
function metode1(){
if(document.getElementById("room1").innerHTML > 0) {
document.getElementById("room1").innerHTML = 0;
}
else {
document.getElementById("room1").innerHTML = 1;
}
}
function metode2(){
document.getElementById("table1").rows[1].cells[1].innerHTML = 0;
}
</script>
But neither of them work..
What can I do?
metode1 would work, but your initial text in the element has spaces on either side of the 0, so > can't implicitly convert it to a number. If you remove the spaces (in the markup, or by doing .innerHTML.trim() on a modern browser), the implicit conversion from string to number will work. You might consider converting explicitly, but you'll still have to trim.
Live Example with the spaces removed in the markup:
function metode1() {
if (document.getElementById("room1").innerHTML > 0) {
document.getElementById("room1").innerHTML = 0;
} else {
document.getElementById("room1").innerHTML = 1;
}
}
<table border="1" cellpadding="1" cellspacing="3">
<tr>
<td>Room</td>
<td>Status</td>
</tr>
<tr>
<td>r1</td>
<td id="room1">0</td>
</tr>
<tr>
<td>r2</td>
<td>0</td>
</tr>
<tr>
<td>r3</td>
<td>1</td>
</tr>
</table>
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
Live Example using trim:
function metode1() {
if (document.getElementById("room1").innerHTML.trim() > 0) {
document.getElementById("room1").innerHTML = 0;
} else {
document.getElementById("room1").innerHTML = 1;
}
}
<table border="1" cellpadding="1" cellspacing="3">
<tr>
<td>Room</td>
<td>Status</td>
</tr>
<tr>
<td>r1</td>
<td id="room1"> 0 </td>
</tr>
<tr>
<td>r2</td>
<td>0</td>
</tr>
<tr>
<td>r3</td>
<td>1</td>
</tr>
</table>
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
Note that trim was added in ECMAScript5 (2009) and so may not be on some older JavaScript engines. It's easily shimmed, though.
Try this-
<button type="button" onclick="metode1()">Room 1 => 0/1</button>
function metode1(){
if(document.getElementById("room1").innerHTML.trim() =="1") {
document.getElementById("room1").innerHTML = 0;
}
else {
document.getElementById("room1").innerHTML = 1;
}
}
1)here i'm doing clone of a row...but this code is working only in eclipse [ ie ,cloning is working ] and it is also not working in any browsers.
2)What is the solution to get the values of text boxes in the cloned rows having same name, and insert into the database using jsp and servlet?
how can i get those values with same name
3)i have servlet code to get only single value from jsp
String address_seq_num =request.getParameter("address_seq_num");
how can i get the value of address seq number in the cloned row fromjsp to servlet to insert into the next row of a table in the database.
4)if i mention "DOCUMENT TYPE" to this code ,it will not work in eclipse also.....
please guide me...
JavaScript
function clonetable() {
var x=document.getElementById("main_table"); //get the table
var rowCount = x.rows.length;
var row = document.getElementById("table_row_clone"); // find row to copy
var table = document.getElementById("table_body"); // find table to append to
var clone = row.cloneNode(true); // copy children too
var tb1 = clone.document.getElementById("asn");//here i'm incrementing the value
tb1.value=rowCount+1;//of "address seq num " in the cloned row
clone.id = "abc"; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
}
function deltable() {
var x = document.getElementById("main_table"); //get the table
var rowCount = x.rows.length;
if (rowCount > 1) {
x.deleteRow(rowCount - 1);
} //delete the last row
}
HTML
<table id="main_table" align="center" style="width:75%">
<tbody id="table_body">
<tr id="table_row_clone">
<td>
<table align="center" style="width:100%">
<tr>
<td align="center">
<div style="border:3px solid silver;border-radius:5px;background-color:grey">
<table width="100%">
<tr>
<th align="center">Address Details</th>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div style="border:3px solid silver;border-radius:5px;background-color:#1E90FF">
<table align="center" style="width:99%">
<tr style="background-color:#1E90FF">
<td style="width:35%">
<table width="100%">
<tr id="slrow">
<td style="width:43%">Address Seq Num</td>
<td>
<input id="asn" style="width:60px" name="address_seq_num" type="text" value="1" readonly>
</td>
</tr>
</table>
</td>
<td width="49%" align="right">
<input style="width:80%" type="text" value="Reg.office/Primary Office">
</td>
<td align="right">
<input style="width:30px" type="button" value="+" onclick="clonetable()">
<input style="width:30px" type="button" value="-" onclick="deltable()">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
Per your HTML (which is messy, by the way) you can increment that textbox's value with something like:
var tb = document.getElementById("asn");
tb.value = parseInt(tb.value, 10) + 1;
The trick is you have to cast the textbox's value into a number, which is what parseInt is doing in that example.
Note that the above snippet will give you "NaN" in the textbox if the value is not a valid number - it's not doing any data validation at all.