jQuery - ForEach function on rendered HTML - javascript

I have the following JS/jQuery which grabs the cell value of an ASP DetailsView control (rendered HTML), checks it for a condition, and hides a div based on said condition. It is basically checking to see if the cell value is formatted like an IP address or not...
$(document).ready(function () {
//Grab innerHTML in the IPAddress cell from DetailsView1
//See if it contains the characters: 10.
//If it does not contain '10.', hide the parent div for that user
var ip = document.getElementById("DetailsView1").rows[3].cells[0].innerHTML;
var addrFormat = ip.includes("10.");
if (addrFormat == false) {
$("#IDofDetailsView1ParentDiv").hide();
}
});
This works well, but I need to check several DetailsView controls, and potentially .hide() several elements by ID.
In JS/jQuery, is there a way to:
ForEach rendered HTML element like DetailsView, check format condition, then hide parent div for this control only, if condition is false
Thank you for any advice.
EDITED TO SHOW MARKUP
Here is the rendered HTML I am working with...
<div class="square" id="myId">
<div class="content">
<div><p id="myId2">Unavailable for Dispatch</p>
<div class="table">
<div class="table-cell">
<div id="UpdatePanel1">
<div>
<table class="Grid" cellspacing="0" rules="all" border="1" id="DetailsView1" style="border-collapse:collapse;">
<tr align="center">
<td colspan="2" style="border-style:None;">Text1</td>
</tr><tr align="center">
<td class="building" colspan="2" style="border-style:None;">Text2</td>
</tr><tr align="center">
<td colspan="2" style="border-style:None;">Text3</td>
</tr><tr align="center">
<td class="hide" colspan="2" style="border-style:None;">Text4</td>
</tr><tr align="center">
<td class="hide" colspan="2">Text5</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
I have several of these on my page. Right now I am using:
var ip = document.getElementById("DetailsView1").rows[3].cells[0].innerHTML;
But I will probably need to use a class selector on "Grid" to process them all at once, correct?
Then I need to hide the very highest div by id, not the closest parent. But ONLY hide those divs whose td 'Text 4' value is false. I am not sure how to grab the innerHTML I am currently getting from "DetailsView1", if I use the Grid class instead.
Thank you again...

Uses for each and then use 'this' to target individual elements.
EDIT: Had to edit this and removed includes() as it does not work in very many browsers. Now I am converting the HTML of all .Grid elements toString() and then I use indexOf() on that string to determine if it contains 10.
New working fiddle:
https://jsfiddle.net/Lh5kenge/
Updated Code:
$(function(){
$('.Grid').each(function(){
var string = $(this).html().toString()
console.log(string)
if (string.indexOf("10.") > -1) {
$(this).closest('.square').hide()
}
})
})

Related

Replace ID for all tag after cloning node by javascript

I need to change all ID after cloning node below by javascript or jquery.
<table id="1">
<tr>
<td id="RM_1"><button type="button" onclick="duplicateFunction(1)"></td>
<td id="CL_1"><input id="[1][999]"/></td>
</tr>
</table>
when I clone node with ID = "1" I need to change 1 to 2 as in all ID tags below.
<table id="2">
<tr>
<td id="RM_2"><button type="button" onclick="duplicateFunction(2)"></td>
<td id="CL_2"><input id="[2][999]"/></td>
</tr>
</table>
Remark : The table id is unique id. I use simple number to explain the code.
update
When user click duplicate button. The duplicateFunction will be called.
now , I can change table id but I can't change inside.
function duplicateFunction(table_id){
var myTable = document.getElementById(table_id);
myClone = myTable.cloneNode(true);
var newTableID = Date.now();
myClone.id = newTableID;
document.getElementById("AddingSpace").appendChild(myClone);
}
because every tags have another features to do when user click.
that's the best way on this time.
Thank you in advance
This is an attempt along the lines suggested by Rory McCrossan. Instead of the individual ids of your elements inside the table I used shortened class names. The tables do not have actual ids but dataset attributes with id properties. This way it will not cause serious problems if ids should become double ...
My function calculates a newid on the basis of the number of already existing tables in the #addingspace div. This is not production ready either but probably less problematic than your original approach.
const $trg=$('#addingspace');
$(document).on('click','.RM button',function(){
let newid=$trg.find('table').length+2;
$trg.append(
$(this).closest('table').clone().data('id',newid) // set data-id
.find('.CL span').text(newid).end() // set span and return cloned element
)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-id="1">
<tr>
<td class="RM"><button type="button">duplicate</button></td>
<td class="CL"><input /> id: <span>1</span></td>
</tr>
</table>
<div id="addingspace"></div>

Add class if two id has same value

I have the two divs, One for questions another one for answers. if the div id ques0 has here class <div id="ques0" class="showquestion here"></div>, respect to answers id qstats0 of parent tr added class of highlight.
HTML
<!--Question-->
<div id="ques0" class="showquestion here"></div>
<div id="ques1" class="hidequestion"></div>
<div id="ques2" class="hidequestion">
<!--Answer-->
<tr>
<td valign="top">1</td>
<td valign="top" id="qstatschoice0">A</td>
<td id="qstats0">N</td>
</tr>
<tr>
<td valign="top">2</td>
<td valign="top" id="qstatschoice1">A</td>
<td id="qstats1">N</td>
</tr>
<tr>
<td valign="top">3</td>
<td valign="top" id="qstatschoice2">A</td>
<td id="qstats2">N</td>
</tr>
I want output like below.
<!--answer-->
<tr class="highlight">
<td valign="top">1</td>
<td valign="top" id="qstatschoice0">A</td>
<td id="qstats0">N</td>
</tr>
The ids are not the same(and it should not be), but there is a relationship ie the numeric part of the ids are the same so you can use replace() to find out the td with id qstats<x>(where x is the numeric part of the id of the here element) then find the tr ancestor of it and highlight it.
function highlight() {
var $c = $('.showquestion'),
//get the id of here element
id = $c.attr('id');
//find the tr to highlight
$('#' + id.replace('ques', 'qstats')).closest('tr').addClass('highlight')
}
Demo: Fiddle
I don't know where you use jQuery..
document.getElementById('current_question')
$("#current_question") // jquery way ;-)
try smthg
$("#an_id").addClass("blabla");
$("#an_id").removeClass("blabla");
btw, if many div's have the same ID, i think only the last one in the DOM will match.
First: document.getElementById is clean javascript, not jquery.
Second: try something like this:
var question = $('#ques0').text();
var answer = $('#qstats0').text();
if (question == answer) {
answer.parent('tr').addClass('highlight');
}
Some info: ids have no value. It's just identificator of an element. .text() gets all text inside selected element.
Tell me if I understood something wrong and if so - please provide more information.
Best regards.

Jquery how to retrieve / replace value in <span> <tr> <td> value?

There are more than one TR TD, same class name given in a table used for formatting without ID given.
I would like to seek help for jQuery. How can I retrieve / replace <td> content in the span id = payment_currency_text, class="formdata element?
1) To set a variable, store as SGD, getting from second set of TR TD.
2) Replace SGD to EUR.
Note : The system used Jquery version = v1.4.2
I tr to used below syntax but no luck :
alert(jQuery("#payment_currency_text tr.find(.formdata)").val());
alert(jQuery("#payment_currency_text").next('.formdata').val());
alert(jQuery("#payment_currency_text tr td.formdata").val());
alert(jQuery("#payment_currency_text").find(".formdata").html());
... (tr td child)
<tr>
<td class="prompt" align="left">
Region*
</td>
<td class="formdata" align="left">
Asian
</td>
</tr>
<span id ="payment_currency_text"> <!--- There is a SPAN tag, with ID given --->
<tr>
<td class="prompt" align="left">
Payment currency*
</td>
<td class="formdata" align="left">
SGD <!--- How i can set a variable to hold SGD, then replace to EUR? --->
</td>
</tr>
</span>
to target td.formdata inside span.Try this:
To get:
var currency=$('#payment_currency_text .formdata').html();//currency will be SGD here
To set:
$('#payment_currency_text .formdata').html('EUR');
If you know that its always going to be a specific child you can use the :nth-child() selector.
var setter = $("tr:nth-child(2) td:nth-child(2)").text();
$("tr:nth-child(2) td:nth-child(2)").text("EUR");
alert(setter)
Here is a fiddle http://jsfiddle.net/87V9v/
In jQuery you can replace the inner HTML of an element like so
$('.class-name').html("Some html in here");
However, be careful because this will replace the HTML for all classes of this name.
You can use text() to get the data (plain text) as well as replace existing data with new one. If your replacement is HTML, you can use html()
var data=$('td.formdata').text();
alert("The value is"+data);
$('td.formdata').text("New Data");
You can use:
$("#payment_currency_text").text("your text");
or
$("#payment_currency_text").html("your<b>text</b>");
If you just want to change the html inside the td, use like this
$(".formdata").html("some text or tags here");
If you want to get the text inside those td, use like this
$(".formdata").each(function(){
$(this).html();
});
Edit
$("#payment_currency_text").find(".formdata").html()
$("#payment_currency_text").find(".formdata").html("some text or tags here");
Your html structure has some problem, you cant enclose tr inside span. tr should be the child of table. So change your html accordingly.
<table>
<tr>
<td class="prompt" align="left">
Region*
</td>
<td class="formdata" align="left">
Asian
</td>
</tr>
<tr id="payment_currency_text">
<td class="prompt" align="left">
Payment currency*
</td>
<td class="formdata" align="left">
SGD
<!--- How i can set a variable to hold SGD, then replace to EUR? --->
</td>
</tr>
</table>
Then you can use the above code for getting the elements and values.

jQuery search through table rows, hidden and visible

I've got a table where i display message history. By default the table displays only the last message between two people. But all of the messages are in the HTML code, just that they are set with display:none;
Im trying to make the search go through both visible and hidden tr rows.
What i currently have:
HTML:
<table cellpadding="0" cellspacing="0" width="100%" class="tDefault mytasks" id="history">
<tr>
<td>Finish design</td>
<td align="center"><strong class="grey">0%</strong></td>
</tr>
<tr>
<td>Aquincum HTML code</td>
<td align="center"><strong class="green">89%</strong></td>
</tr>
<tr style="display:none;">
<td>Aquincum cpp code</td>
<td align="center"><strong class="green">99%</strong></td>
</tr>
<tr>
<td>Fix buggy css styles</td>
<td align="center"><strong class="red">16%</strong></td>
</tr>
</table>
jQuery:
$("#search").keyup(function() {
var value = this.value.toLowerCase().trim();
$("#history tr").each(function (index) {
if (!index) return;
$(this).find("td").each(function () {
var id = $(this).text().toLowerCase().trim();
var not_found = (id.indexOf(value) == -1);
$(this).closest('tr').toggle(!not_found);
return not_found;
});
});
});
I have two problems:
For some reason the first tr is always visible even through it does not match the search. Try to search for buggy css. You'll see that the first tr is still there.
When i search for something, and then clear the search field. The second tr which is by default set to display:none; is visible. It has to somehow go back to a display:none state
jsfiddle:
http://jsfiddle.net/2T5yJ/
For first row index is zero. So its not reaching
$(this).find("td").each(function () {
Remove
if (!index) return;
And search filter would work correct
Update you can check if value="" and write logic to get back display of rows to original
Please check updated fiddle
FIDDLE

Remove elements which contain specified content

I have multiple divs containing tables, one of it is like this:
<div id="apple">
<table width="30%" height="2%" cellpadding="0" border="0px" align="left" >
<tbody>
<tr>
<td style="text-align:center"><font face="Arial"> </font></td>
</tr>
</tbody>
</table>
</div>
Obviously it looks empty but occupies a paragraph in HTML. So I applied JavaScript to remove the table.
var ap = document.getElementById("apple")
if(ap.textContent==" " || ap.textContent==" "){
ap.remove();
}
It seems that I failed to find the "empty" divs. How can I find correctly and remove the whole div?
see fiddle here
You can't call .remove() on a DOM element and I think you are using the non-defined variable div by mistake. Try:
var ap = document.getElementById("apple")
if(ap.textContent==" " || ap.textContent==" ") { //change div for ap
//go to the parent and remove the element
ap.parentNode.removeChild(ap);
}
Your fiddle should look something like this
The textContent will include all the text nodes, the whitespace in the table. Try the following :
var ap = document.getElementById("apple");
if (!ap.textContent.trim()) {
ap.parentNode.removeChild (ap);
}
The is converted to a space in textContent so no need to test for it.
Forked fiddle at http://jsfiddle.net/kQq5b/1/
Here's a solution to your problem, based on your fiddle:
<div id="apple">
<table width="30%" height="2%" cellpadding="0" border="0px" align="left" >
<tbody>
<tr>
<td style="text-align:center"><font face="Arial"> </font></td>
</tr>
</tbody>
</table>
</div>
and JS:
var ap = document.getElementById("apple")
var content = ap.textContent;
content = content.replace(/ /gi, '');
content = content.replace(/\s/g,'');
console.log('Content: "' + content + '"');
if(!content.length){
ap.parentNode.removeChild(ap);
}
Working example: http://jsfiddle.net/orlenko/pvWTP/

Categories