Converting array that holding html elements into NodeList with Jquery - javascript

Html
<html>
<body>
<table>
<tr>
<td class="some"></td>
<td></td>
</tr>
<tr>
<td class="some"></td>
<td></td>
</tr>
<tr>
<td class="some"></td>
<td></td>
</tr>
</table>
</body>
</html>
Script
<script>
//Convert the table to columns
var columns = [];
var trs = $("table tr");
for(i=0;i<trs.length;i++){
var column = [];
for(j=0;j<2;j++){
column.push($(trs[j]).find("td")[i]);
}
columns.push(column);
}
</script>
The Problem
I can't use $.find method on the array to filter by selector.
For Example, this code won't find anything:
<script>
$(columns[0]).find(".some").length // will print 0
</script>
Question
How can I trick jQuery engine to assume that columns[0] is NodeList?
I don't want to use cloning because it's not good enough for my project.
Thanks.

Related

how to hide a table row in html here the condition as row values using javaScript ? If two row values are the same then hide one

I have a html table where I need to hide one row where column value is same. like if key1 and key2 have same value then hide one row.
here each row is different, in that there are two dates whose value may be same sometimes in that case i should hide one row. the data are comming in html in json format. here duplicate does not mean that two rows are completely same, no there values are same.
<html>
<header>Hide Test</header>
<body>
<pre>
<tr>
<td>Key1</td>
<td>Value1</td>
</tr>
<tr>
<td>Key2</td>
<td>Value2</td>
</tr>
<tr>
<td>Key3</td>
<td>Value3</td>
</tr>
</pre>
</body>
</html>
You can loop over all rows, save found values in an array and if a value is already in an array you will hide it instead.
var rows = document.querySelectorAll('table tr');
var foundValues = [];
rows.forEach(function(el){
console.log(foundValues);
console.log(el.children[1].innerHTML);
if(foundValues.includes(el.children[1].innerHTML)) {
el.style.display = 'none';
}
else {
foundValues.push(el.children[1].innerHTML);
}
});
<table>
<tr>
<td>Key1</td>
<td>Value1</td>
</tr>
<tr>
<td>Key2</td>
<td>Value2</td>
</tr>
<tr>
<td>Key3</td>
<td>Value2</td>
</tr>
<tr>
<td>Key4</td>
<td>Value4</td>
</tr>
</table>
Assuming the value will always be in the second field of each row I have a solution here which should work.
//we need to check that the window has loaded so we can target the elements in the DOM.
window.onload = function(){
var seen = [];
var tableRows = document.getElementsByTagName('tr');
for(i = 0; i < tableRows.length; i++){
//get the table data for this particular table row
var tableData = tableRows[i].getElementsByTagName('td');
//the value will be contained in the second td tag of the row so we retrieve it as follows:
var value = tableData[1].innerText;
//log the value to check.
console.log(value);
if(seen[value]){
//if the value already exists hide the table row that contains this value.
tableRows[i].style.display = "none";
}else{
//add the value to the 'seen' array.
seen[value] = true;
}
}
}
You can test this with the following table where two values are the same.
<!DOCTYPE html>
<html>
<head>
<title>Hide test</title>
<script>
//javascript code goes here
</script>
</head>
<body>
<table>
<tr>
<td>Key1</td>
<td>Value1</td>
</tr>
<tr>
<td>Key2</td>
<td>Value2</td>
</tr>
<tr>
<td>Key3</td>
<td>Value1</td>
</tr>
</table>
</body>
</html>

How to find the id with the greatest value

I'm developing an ASP.NET MVC web page using Razor. Versions are Microsoft.AspNet.Mvc 5.2.3, Microsoft.AspNet.Razor 3.2.3, .NET Framework 4.7, C# and Javascript.
A view will have a table with these rows:
<tr id="level01_01"> ... </tr>
<tr id="level01_02"> ... </tr>
<tr id="level01_03"> ... </tr>
I need to know with jQuery which is the id for the latest row. In the above example is level01_03.
I create these rows with C# so I can add the input hidden with the latest id as value.
If I want to find it without an input hidden, I don't know how to do it. In this SO answer I've found how to get an id with a value greater than other, but this is not what I'm looking for:
<div id="div22" class="fade">text</div>
<div id="div35" class="fade">text</div>
<div id="div40" class="fade">text</div>
then jQuery
var divs = $('.fade').map(function(){
if (this.id.replace('div','') > 35) return '#'+this.id;
}).get().join(',');
$(divs).fadeTo("slow", 0.6);
BUT THIS IS NOT WHAT I'M LOOKING FOR.
I'm looking to get the id with the greatest number. In this example the id is level01_03.
How can I get the id with the greatest id?
You can use this to return the highest id value.
var ids = $("tr[id^='level01_']").map(function() {
return parseInt(this.id.replace("level01_", ""), 10);
}).get();
var highest = Math.max.apply(Math, ids);
console.log(highest)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="level01_01"> ... </tr>
<tr id="level01_02"> ... </tr>
<tr id="level01_03"> ... </tr>
</table>
There's several possible ways of doing this.
Firstly, assuming that the highest id will be the last one, you can just get the tr:last and read it's id:
var lastId = $('table tr:last').prop('id').spit('_')[1];
Alternatively, if the values are incremental you can just count the total number of tr elements:
var lastId = $('table tr').length;
Finally, if they are not in order you can use map() to build an array of the values, then Math.max to get the highest:
var highestId = Math.max.apply(Math, $('table tr').map(function() {
return parseInt(this.id.split('_')[1], 10);
}).get());
console.log(highestId);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="level01_10"></tr>
<tr id="level01_221"></tr>
<tr id="level01_3"></tr>
</table>
This function will set $el to the row with the highest valued Id.
var $el, max = 0;
$("tr").each(function() {
var i = parseInt(this.id.replace(/.*_(\d+)$/, "$1"));
if (i > max) {
max = i;
$el = $(this);
}
});
Use jQuery.filter
var divs = $('.fade').filter(function() {
return (+this.id.replace('div', '') > 35);
});
$(divs).fadeTo("slow", 0.6);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="div22" class="fade">text</div>
<div id="div35" class="fade">text</div>
<div id="div40" class="fade">text</div>
To get filtered IDs:
var divs = $('.fade').filter(function() {
return (+this.id.replace('div', '') > 35);
}).map(function() {
return this.id;
});
console.log(divs.get());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="div22" class="fade">text</div>
<div id="div35" class="fade">text</div>
<div id="div40" class="fade">text</div>
if your TR having ascending ID than you can simply get last TR id like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
alert($("#tbl tr:last").attr("id"));
});
</script>
</head>
<body>
<table class="data" id="tbl">
<tr id="level01_01">
<th>Entry Header 1</th>
<th>Entry Header 2</th>
<th>Entry Header 3</th>
<th>Entry Header 4</th>
</tr>
<tr id="level01_02">
<td>Entry First Line 1</td>
<td>Entry First Line 2</td>
<td>Entry First Line 3</td>
<td>Entry First Line 4</td>
</tr>
<tr id="level01_03">
<td>Entry Line 1</td>
<td>Entry Line 2</td>
<td>Entry Line 3</td>
<td>Entry Line 4</td>
</tr>
<tr id="level01_04">
<td>Entry Last Line 1</td>
<td>Entry Last Line 2</td>
<td>Entry Last Line 3</td>
<td>Entry Last Line 4</td>
</tr>
</table>
</body>
</html>
You can achieve by comparing id as string like this code below:
var max = '';
$("#test tr").each(function() {
if (this.id.localeCompare(max) > 0) {
max = this.id;
}
});
console.log(max)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
<tr id="level01_01"> ... </tr>
<tr id="level01_02"> ... </tr>
<tr id="level01_153"> ... </tr>
<div id="res"></div>
</table>

How to initialize dynamic input with css selector using query selector?

How to initilize dynamic number with in css selector?
Ex-pageUrl.QuerySelector(.attachment-type-table .qa-type-id-label-for-25)
The above line given only one Result Photograph.
I need to get all names with in span tag
( qa-type-id-label-for-26,qa-type-id-label-for-25, qa-type-id-label-for-27 etc)
Use native function yourSpan.attr('class'), and then you can use .Split(" ")
for get individual of class.
Is this what you are trying to do?
I have implemented querySelectAll() matching partially to a class name.
<table id="attachmentTypeTable" class="appconfig-data-table attachment-type-table">
<tbody>
<tr>
<tr id="28RemoveAType">
<tr id="27RemoveAType">
<tr id="26RemoveAType">
<td><span class="qa-type-id-label-for-26">Transfer cover</span></td>
<td>
</tr>
<tr id="25RemoveAType">
<td><span class="qa-type-id-label-for-25">Photograph</span></td>
<td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var x = document.querySelectorAll('[class^="qa-type-id-label-for-"]');
for(var i=0;i< x.length;i++){
document.write('result'+i+':'+x[i].innerHTML+'<br/>');
}
</script>

Swap table rows using javascript

Am trying to do like this,
<table>
<tr id="ID1"><td></td></tr>
<tr id="ID2"><td></td></tr>
</table>
I need to swap table rows index position like as follows
<table>
<tr id="ID2"><td></td></tr>
<tr id="ID1"><td></td></tr>
</table>
I tried to fix it using jQuery as:
$('#ID1').after('#ID2');
Can anyone help me to fix the above requirement using javascript?
$('#ID1').after('#ID2');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id="ID1">
<td></td>
</tr>
<tr id="ID2">
<td></td>
</tr>
</table>
after() is used to insert content. To move or add elements, use insertAfter():
$('#ID1').insertAfter('#ID2');
Example fiddle
Swap row by appendChild.
var x = document.getElementById("first");
var table = document.getElementById("table");
table.appendChild(x);
<table id="table">
<tr id="first"><td>First</td></tr>
<tr id="second"><td>Second</td></tr>
</table>

Multiple elements with same Id in Javascript

I have a case where a html file contains multiple elements with the same ID name.
The table row contains 5 columns of which I need to consider 2,3,4,5 columns data.
<tr id='total_row'>
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
I have the above code at several places in the file. I need to add the respective values using javascript.
An ID is unique in an html page. You can call it THE ID as well wrt a page. You cannot have same ID for two different tags in a single page. But you can use class instead of and ID. Know about it here
So your HTML can be like
<tr class='total_row'>
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
As an example with jquery you can do something like this,
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<table>
<tr class="one">
<td></td>
<td></td>
</tr>
<tr class="one">
<td></td>
<td></td>
</tr>
<tr class="one">
<td></td>
<td></td>
</tr>
</table>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
$(".one").eq(0).find('td').eq(0).html("I'm tracked");
// get 1st tr and get first td
$(".one").eq(1).find('td').eq(1).html("I'm tracked");
// get 2nd tr and get second td
$(".one").eq(2).find('td').eq(0).html("I'm tracked");
// get 3rd tr and get first td
});
</script>
</body>
</html>
But I guess this approach can be tedious.
Id should be unique and if you use the same id, javascript code refers only the first element. but if you still want to use same id than you may try the below code:
$(function(){
$('[id="total_row"]').each(function(){//run for every element having 'total_row' id
var $this = $(this);
$this.find('td').eq(1).text() //to get second column data
$this.find('td').eq(1).text('dummy text') //to set second column data
});
});
You can use XHTML:
<p id="foo" xml:id="bar">
Through XHTML you can apply similar ID to multiple Controls.
Similar questions can be found here:
http://www.c-sharpcorner.com/Forums/
While duplicate IDs are invalid, they are tolerated and can be worked around. They are really only an issue when using document.getElementById.
I'll guess that the table looks like:
<table id="t0">
<tr>
<td>-<th>count<th>Pass<td>Fail<td>Error<td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr id='total_row'>
<td>Total<td><td><td><td><td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr>
<td>-<td>1<td><td>1<td>0<td>
<tr>
<td>-<td>1<td><td>0<td>1<td>
<tr id='total_row'>
<td>Total<td><td><td><td><td>
</table>
<button onclick="calcTotals();">Calc totals</button>
If that's correct, then a function to add each sub–section can be like:
function calcTotals(){
var table = document.getElementById('t0');
var rows = table.rows;
var row, totals = [0,0,0,0];
// For every row in the table (skipping the header row)
for (var i=1, iLen=rows.length; i<iLen; i++) {
row = rows[i];
// If it's a total row, write the totals and
// reset the totals array
if (row.id == 'total_row') {
for (var j=0, jLen=totals.length; j<jLen; j++) {
row.cells[j+1].innerHTML = totals[j];
totals[j] = 0;
}
// Otherwise, add values to the totals
} else {
for (var k=0, kLen=totals.length; k<kLen; k++) {
totals[k] += parseInt(row.cells[k + 1].innerHTML) || 0;
}
}
}
}
In addition to using classes, which works but feels kind of icky to me, one can also use data-* attributes.
<tr class='total_row' data-val-row-type="totals-row">
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
Then, in your script (jQuery syntax -- querySelectorAll has a similar syntax)
var $totalsRows = $("[data-val-row-type='totals-row']);
When you are in a team with a separate UI designer, this keeps the UI guy from ripping out and changing your class names to fix the new design layout and it makes it quite clear that you are using this value to identify the row, not just style it.

Categories