Looking for some help on how to capture value for a specific TD cell. The challenge i'm faced with is that I cannot modify the TD cell to include classes or modify them as the table content are created dynamically by another system.
I created the fiddle below to give you an idea of what the structure of the table. As i explained above since I cannot directly modify the table structure or add extra classes to make it easier to target the TD cell I want, I am trying to Macgyver my way out of this one.
What I am trying to accomplish is this:
1) Need to capture the Reference number (Always 11 characters long and only contains numbers).
2) Put the captured reference number into a variable.
3) Concatenate the variable to the following url http://test.com/UpdateNotification.asp?OEN= (variable here) &CL=ALL&SU=ALL
4) Replace the Reference number with the URL.
So I am really having problems with the step 1 of this process. I would appreciate some help on this.
http://jsfiddle.net/W4Km8/5665/
<DIV class="sm_content">
<table border="1" width="100%">
<tr>
<td class="ms-vb2">reference numbers</td>
<td class="ms-vb2">name</td>
<td class="ms-vb2">Description</td>
<td class="ms-vb2">Incident</td>
</tr>
<tr>
<td class="ms-vb2">20150715110</td>
<td class="ms-vb2">Jhonson Doe</td>
<td class="ms-vb2">Box of cereal and other stuff</td>
<td class="ms-vb2">123</td>
</tr>
<tr>
<td class="ms-vb2">20150715111</td>
<td class="ms-vb2">Bobby Boucher</td>
<td class="ms-vb2">Box of nails and stuff</td>
<td class="ms-vb2">124</td>
</tr>
</table>
</DIV>
In the future, please make an effort before asking. That said, coders gotta code.
$('.sm_content table tr:gt(0)').each(function() {
var myId = $(this).find('td').eq(0).text();
var myUrl = 'http://test.com/UpdateNotification.asp?OEN=' + myId;
$(this).find('td').eq(0).html('' + myId + '');
});
Fiddle demo
Or, if you didn't actually want the ID linked, just do this for the last line:
$(this).find('td').eq(0).text(myUrl);
You have different ways to do it.
(function($){
$('.sm_content tr').slice(1).each(function(){
var td = $(this).find('td').first();
var tdContent = td.html();
td.html('' + tdContent + '');
});
})(jQuery);
Load the entire page into a string. I've used phpfilegetcontents but for an html only page I'd manually copy and paste the page into a text box and use document.getElementbyid('box').innerHTML to load the page's contents into a string
Find the first cell: entirepage.indexOf('td')
entirepage.slice(start from location of td plus enough characters to get past the rest of the tag, end 11 characters later)
that's your reference number
find the nth instance of 'td'
and so on.
no jquery necessary
Related
Input :
<tr>
...
</tr>
<tr>
<td class="text">M-GOOG-NYC-03-SW01</td>
<td class="text">8.8.8.8</td>
<td class="comma">2</td>
<td class="elapsed"><div data-toggle="tooltip" data-placement="bottom" title="Last Change: Sun, Oct 17, 2021 at 09:16">2 mins 14 secs</div></td>
<td class="text">up</td>
</tr>
<tr>
...
</tr>
Objective :
I am looking for the RegEx logic to match a HTML row, where
the last column has the word "up" or "down" in that column,
ie.
<td class="text">up</td>
or
<td class="text">down</td>
So that once I satisfy in this condition, ie. look for "Up" or "Down" in the last column,
I want to change the background colour of the first column (or even the entire row), by inserting some small HTML code into:
<td class="text">M-GOOG-NYC-03-SW01</td>
to make it this
<td class="text" "style=background-color:#FFCC99">M-GOOG-NYC-03-SW01</td>
Basically, I am thinking along the lines of the 'anchors' should be these :
Start - \n<tr>\n<td class=\"text\"
End - \n<td class=\"text\">up<\/td>\n<\/tr>
The thing is, some rows that start with \n<tr> , but don't have the adjacent column <td class> next to it.
Also, the multiple strings / paragraphs in between the anchors, contain a lot of semi-colons, quotation marks, equal signs, percentage symbols, hyphens, angle-brackets, etc.
If it's 'complex' to modify just that first column, then I would like some help to find out how to insert the HTML into the first row,
ie. \n<tr> becomes <\n<tr "style=background-color:#FFCC99">
For me, that could be a better solution, ie. highlighting an entire row,
based on upon a keyword, in the last column (ie. UP or DOWN).
( However, I would still like to know how to insert something in the first column, because that was my aim all this time, before having to come here)
Attempt:
I have tried to locate the 'string', to start from \n\n<td class="text">
with the end at <td\sclass="text">up</td>\n</tr>
and then, attempting to use capture groups to insert the desired HTML code into it.
Some things I tried :
replace((?<=\n<tr>\n<td class=\"text\")[\s\S\D\W]*(?=\n<td class=\"text\">up<\/td>\n<\/tr>))/igm,'style=\"background-color:#FFCC99;\"$1');
replace(/((?<=\n<tr>\n<td class=\"text\")[\s\S]*(?=up<\/td>\n<\/tr>))/igm,'style=\"background-color:#FFCC99;\"$1');
replace(/(\n<tr>\n<td\sclass=\"text\">)([\s\S\D\W]*)(<td\sclass=\"text\">up<\/td>\n<\/tr>)/igm,'<td class=\"text\" style=\"background-color:#CCCCCC;\">$2');
I just kept getting stumped, because either:
it would match the instance once
it would match the first row <tr> but skip another row <tr>, and end the string with a different </tr>
It is generally not recommended to manipulate HTML with regex.
The following isn't a watertight solution but it may be good enough.
const html = `
<tr>
...
</tr>
<tr>
<td class="text">M-GOOG-NYC-03-SW01</td>
<td class="text">8.8.8.8</td>
<td class="comma">2</td>
<td class="elapsed"><div data-toggle="tooltip" data-placement="bottom" title="Last Change: Sun, Oct 17, 2021 at 09:16">2 mins 14 secs</div></td>
<td class="text">up</td>
</tr>
<tr>
...
</tr>
`;
const lastCol = /<td class="text">(up|down)<\/td>[^<>]*<\/tr>/;
const match = html.match(lastCol);
if (match === null) {
console.log('No match!');
} else {
console.log(`Direction is ${match[1]}`);
const firstCol = /(?<=<tr>[^<>]*<td class="text")>/;
console.log(html.replace(firstCol, ' style="background-color:#FFCC99">'));
}
To match the first column, a positive lookbehind is used to only match the column which has no angle brackets behind it in the string before </tr> appears.
[^<>]* means match zero or more characters that are not angle brackets.
The above only looks for one match and makes one replacement, but it is not difficult to adapt it to perform many.
I'm new in JavaScript. I have table that can have one or more rows.
The first thing I do is verify how many rows I want to insert and use the following command to fill the table .
$('#optionsTable').html('<tr id="table"><td width="90%" colspan="2" class="cellheader".......></tr>)
When I have more than one row, I'm trying to use the innerHTML to get the row that was inserted before because I need to modify it. I mean if I have more than one row I don't need to have the second <td> tag (or it can be there but without the <a href></a> tag) and I need to have the text "Principal" in bold after the text "Tomorrow" in first <td>.
The innerHTML that I'm getting from the first row is the following:
<tr id="documento1">
<td width="90%">Tomorrow</td>
<td width="10%" align="center"><Remove></td>
</tr>
I've already check this, but it doesn't solve my problem.
Does anyone can help me finding a solution to change the innerHTML please?
My html code is-
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<input type="hidden" value="000001234" id="taxID">
<td id="fullName">Y, X</td>
</tr>
Here, I want to get hidden field value. I can not use ID of hidden field to get its value because there are multiple rows which can contain hidden field with same ID as "taxID". I want to get this value using <tr> class name.
i.e. selected.
I am using below code to get its value but it is giving me 'undefined' value.
var x = document.getElementsByClassName("selected")[0];
var y = x.getElementsByTagName("input")[0];
alert(y.value);
Alert statement shows undefined value. Am I missing something over here?
First, you cannot have multiple elements in a document with identical id values. That will have to be altered and that alone may solve your problem.
Second, your HTML is invalid. The input must be inside of a td.
Next, there is no reason to use getElementsByClassName() or getElementsByTagName() when you are looking for just one element - it's wasteful because you wind up searching the entire document when you are only interested in one item.
Also, both of those methods return "live" node lists which require re-scanning the entire document every time their results are referenced. The use cases for that are limited.
Instead use .querySelector() when you want to find just one item based on any valid CSS selector and .querySelectorAll() when you want to find a set of matching elements.
Assuming these things are corrected, you can do this:
var x = document.querySelector(".selected td input[type=hidden]");
alert(x.value);
<table>
<tr class="selected">
<td id="participantID">XXXXX1234
<input type="hidden" value="000001234" id="taxID">
</td>
<td id="fullName">Y, X</td>
</tr>
</table>
You need to have a table be the parent of a tr, then the DOM lookup will properly work. Also as noted by #Rory McCrossan you will want to wrap td tag around your input element:
var x = document.getElementsByClassName("selected")[0];
var y = x.getElementsByTagName("input")[0];
alert(y.value);
<table>
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<td><input type="hidden" value="000001234" id="taxID" /></td>
<td id="fullName">Y, X</td>
</tr>
</table>
(Posted solution on behalf of the OP).
After removing ID of hidden field, it is working fine. Edited code is:
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<input type="hidden" value="000001234" id="taxID">
<td id="fullName">Y, X</td>
</tr>
I have html table like this:
<table cellpadding="2" cellspacing="1" width="700">
<tbody>
<tr>
<td class="dark" colspan="2">
Customer Details
</td>
</tr>
<tr>
<td>
Customer Contact Name
</td>
<td>
<input name="tbname" type="text" id="tbname" class="widetb">
</td>
</tr>
</tbody>
</table>
I want to add Some text at the start of the table so it's the first td in the table, how can I do this using jquery? I really don't have clue where to start.
I have to do it this way as I don't have access to change this via the html.
Here is a one liner :
$('td.dark').text('Enter your text here!'); // the class is present in your HTML
This will search for the td with class dark which represents the first td and it will insert the text.
In case you have multiple tables:
$('td.dark').eq(0).text('Enter your text here!');
// here 0 represents the position of the table minus 1 , you want to change the text
As example, so:
$('td', 'table').first().text('hello!');
You could try a google search next time.
The jquery method find finds the set of elements in a parent matching a selector, and eq selects a certain element from the set (with element 1 being referenced by 0 as in arrays). Therefore, you can use the following if you only have one table in your entire document:
$("table") // select all tables
.eq(0) // select the one you want (the only one)
.find("td") // select all td's
.eq(0) // select the first one (the one you want)
.html("insert new content here"); // set the td's inner html
If you have multiple tables, it's tricky. You will need the index of your table relative to other tables. For example, if you have
<table>...</table>
...
<table>...</table>
...
<table>table you are targeting</table>
.......
Then the index of your table would be 2 because it is the third table in the document, and indices start at 0. If you have an index, you can use
var table_index=// set this to the index
$("table") // select all tables
.eq(table_index) // select the one you want (with the index)
.find("td") // select all td's
.eq(0) // select the first one (the one you want)
.html("insert new content here"); // set the td's inner html
It helps if you give your table an id, then you can do something similar to:
$('#id >tbody').prepend('<tr><td>A shiny new row<td></tr>');
Give ID to that First td as your code looks like
<table cellpadding="2" cellspacing="1" width="700">
<tbody>
<tr>
<td id="firsttd" class="dark" colspan="2">
Customer Details
</td>
</tr>
<tr>
<td>
Customer Contact Name
</td>
<td>
<input name="tbname" type="text" id="tbname" class="widetb">
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('#firsttd').text("Your title here");
</script>
If you can't access the HTML at all and if you have multiple tables then this will work:
var newTR = $( "<tr id='newRow'/>" );
var newTRcontent = "<td colspan=1>Your New Text Here</td>";
$("table:nth-of-type(2) tbody tr").first().before(newTR);
$("#newRow").html(newTRcontent);
I made an example fiddle here
Basically it about using the proper JQuery selector so $(table:nth-of-type(2) will select the second table. Then you can use the code I have above or maybe even better yet here is a one-liner:
$("table:nth-of-type(2) tbody tr").first().before("<tr><td>Your New Text Here</td></tr>");
I am working on visualforce pages. below is given the part of HTML file code that has been generated after executing the apex code.
<table class="detailList" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr></tr>
<tr>
<td class="labelCol"></td>
<td class="dataCol col02"> userName </td>
<td class="labelCol"></td> <td class="dataCol"></td>
</tr>
<tr>
<td class="labelCol"></td>
<td class="dataCol col02"></td>
<td class="labelCol"></td>
<td class="dataCol"></td>
</tr>
</table>
I want to remove the userName anchor tag from this page which is coded in line# 6 whose class Name is "dataCol col02", and there is another anchor tag with the same class name "dataCol col02" at line# 11. keep it in mind that this html is generated by executing an APEX code. Kindly guide me how could i remove the anchor tag at line#6 only..
You can use find, first and remove methods.
$('.dataCol.col02').first().find('a').remove();
In case that you want to remove the userName textNode:
$('.dataCol.col02').first().contents().filter(function () {
return this.nodeType === 3;
}).remove();
Removing all the contents:
$('.dataCol.col02').first().empty();
Use this
$(function(){
$(".dataCol.col02:first a").remove();
});
Demo
You could do something like:
var anchor = document.getElementsByClassName("col02")[0] //select first matching 'col02'
.getElementsByTagName("a")[0] //select first matching <a>
anchor.parentNode.remove(anchor)
You can see it running here: jsfiddle
This assumes of course you only ever want to remove from the first instance of something with class='col02', so is not hugely robust. I imagine the fact it's generated means you can't put in more helpful class/id attributes?
On the flipside unlike the other answers it doesn't depend on jquery : )
Try this -
$('td.dataCol.col02').eq(0).find('a').remove();
or if you would like to empty that td -
$('td.dataCol.col02').eq(0).empty();
$("table .dataCol.col02:first a").remove();
Try this:
$("tr:eq(1) > td:eq(1)").remove()
Do this >>
$(".col02:first > a").remove();
Example Fiddle