Using the HTML Below:
<tr class="more-options">
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Required Hidden 1</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="Edit" FieldName="Required_x0020_Hidden_x0020_1" __designer:bind="{ddwrt:DataBind('u',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Required_x0020_Hidden_x0020_1')}"/>
<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Required_x0020_Hidden_x0020_1" ControlMode="Edit"/>
</td>
</tr>
<tr class="more-options">
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Required Hidden 2</nobr>
</H3>
</td>
I am trying to add the class ".more-required" to the Tags. But I want to be able to enter the title text into an array and have a javascript/jquery function add the class to the titles using the title text.
This is the Javascript I have:
var Req = ['Required Hidden 1','Required Hidden 2'];
for (i= 1; i <= Req.length; i++){
var page = $(".ms-standardheader nobr:contains(" +Req[i]+ ")");
page.parent().addClass('more-required');
};
This is just not working.
Any help would be appreciated.
Something like this maybe:
var Req = ['Required Hidden 1','Required Hidden 2'];
$('.ms-standardheader nobr').each(function(){
for(var i = 0;i < Req.length;i++){
if($(this).text().indexOf(Req[i]) != -1){
$(this).addClass('more-required');
}
}
});
You would want to explicitly iterate through each nobr tag, check each array value against it's contents, and if the value is found, add the desired class.
http://jsfiddle.net/sy1L0f05/
Related
I'm trying to append all the text in the td elements to the a element as the subject of the mailto link, but I can only get the first closest elements text. How do I make it so it retrieves the text from all the elements? If possible I would rather have the a link inside the tbody element instead of the tr wrapper.
HTML:
<tbody>
<tr class="row-2" role="row">
<td class="column-1" tabindex="0" style="">2238221D2</td>
<td class="column-2">HPINC</td>
<td class="column-3">N7P47AA</td>
<td class="column-4">HP USB 3.0 to Gigabit LAN Adapter</td>
<td class="column-5" style="display: none;">#4.2</td>
<td class="column-6" style="display: none;">16</td>
<td class="column-7" style="display: none;">30</td>
<td class="column-8" style="display: none;">52</td>
<a class="mailme" href="mailto:test#test.com?subject=Product request&body=">mailtolink</a>
</tr>
</tbody>
Script:
$('a.mailme').each(function() {
$(this).attr('href', $(this).attr('href') +
$(this).closest('a.mailme').prev('td').text());
});
Your code is almost right, just select all td-tags, get the text and join the resulting array:
$('a.mailme').each(function() {
$(this).attr('href', $(this).attr('href') +
$(this).closest('.row-2').children('td').slice(0,-1).map(function() {return $(this).html()}).get().join(','));
});
Working fiddle: https://jsfiddle.net/21873jcz/
EDIT My Solution will work if you fix your html code. a tags are not permitted within tr-tags. Only td or th elements are allowed. So please fix your html and it will work
I found a few problems but here is what you want:
https://jsfiddle.net/uqswr2k3/
var subject = "";
$(".row-2 td").each (function() {
subject = subject + '-' + $(this).html();
});
$(".mailme").attr('href', 'mailto:test#test.com?subject=' + subject + '&body=');
<table>
<tbody>
<tr class="row-2" role="row">
<td class="column-1" tabindex="0" style="">2238221D2</td>
<td class="column-2">HPINC</td>
<td class="column-3">N7P47AA</td>
<td class="column-4">HP USB 3.0 to Gigabit LAN Adapter</td>
<td class="column-5" style="display: none;">#4.2</td>
<td class="column-6" style="display: none;">16</td>
<td class="column-7" style="display: none;">30</td>
<td class="column-8" style="display: none;">52</td>
<a class="mailme" href="">mailtolink</a>
</tr>
</tbody>
</table>
Make sure the tbody has an outside table or it can cause issues with jQuery. You were setting the value of the subject to the current iteration and not collecting them all. I put a variable named subject to add each td cells' HTML content. I separated each value in the subject with a dash - to make it cleaner.
http://jsfiddle.net/yjxq7bae/1/
I am trying to select the checkbox prop in the input tag. The id and name of the input tag are reused, so I have to use the <nobr> text to scale the dom and get the value.
<tr>
<td nowrap="true" valign="top" width="190px" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr>Confirmation Sent</nobr>
</h3>
</td>
<td valign="top" class="ms-formbody">
<span dir="none">
<input id="ctl00_m_g_ed53ee23_de9d_4105_ba24_00e2a21cef5e_ctl00_ctl05_ctl50_ctl00_ctl00_ctl04_ctl00_ctl00_BooleanField" type="checkbox" name="ctl00$m$g_ed53ee23_de9d_4105_ba24_00e2a21cef5e$ctl00$ctl05$ctl50$ctl00$ctl00$ctl04$ctl00$ctl00$BooleanField" checked="checked" /><br />
</span>
</td>
</tr>
<div>Click Here</div>
I have tried every conceivable way. If you will notice .closest() fails once I go up one more from the <h3> element. The fiddle demonstrates this on load by first changing the css of h3, and then attempting to hide the td.
var mop = $('nobr').filter(function () {
return $(this).text() === 'Confirmation Sent'
}).closest("tr").find("input[type=checkbox]").prop('checked');
alert(typeof mop);
$('nobr:contains(Confirmation Sent)').closest("h3").css("background", "yellow");
$('nobr:contains(Confirmation Sent)').closest("h3").closest("td").hide();
$('div').on("click ", function (event) {
var toast = $('nobr').filter(function () {
return $(this).text() === 'Confirmation Sent'
}).closest("tr").find("input[type='checkbox']").prop('checked');
alert(typeof toast);
});
The problem is that you don't have correct syntax for a table. You're missing the <table> and </table> tags around your rows.
Since it's not a valid table, the browser throws away your <tr> and <td> tags:
If you wrap your HTML in a <table> your javascript works as intended.
If you want to retrieve the innerHTML of a div (seen beneath) without using getElementByID (considering this website has several div's with 'quote' as an id), but by referring to the 'field name' (field="bid"). How would you do that?
<div nowrap="nowrap" id="quote" class="realtimeDetailLayer" source="lightstreamer"
style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129"
field="bid">0,28</div>
I want to retrieve the information from an existing website. See beneath. Here you can see that several div's have the same ID
<tbody>
<tr>
<td style="text-align:right;width:auto;padding:8px 0px;"><nobr>Ref.</nobr>:</td>
<td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
EUR
<strong><div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamer" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="reference">350,85
</div></strong>
</td>
<td style="text-align:right;width:auto;padding:8px 0px;"><nobr>Bied</nobr>:</td>
<td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
EUR
<div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamer" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="bid">0,28</div>
</td>
<td style="text-align:right;width:auto;padding:8px 0px;">
<nobr>Laat</nobr>:
</td>
<td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
EUR
<div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamer" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="ask">0,29
</div>
</td>
<td style="text-align:right;width:auto;padding:8px 0px;"><nobr>%</nobr>:</td>
<td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
<div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamerGeneratedValues" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="midchangepercent"><span class="extNegative"><nobr>-50,88 %</nobr></span>
</div>
</td>
</tr>
</tbody>
You can do it by simply parsing the DOM that is by getting parent and children elements.
Try the following:
els = document.getElementsByTagName('div');
for (i=0; i<els.length; i++) {
if (els[i].field == 'bid') {
//do whatever with the bid element here.
}
}
This gets all the divs and checks the field attribute.
This solution is for the worst case scenario where you don't have any way to have unique ids for the elements
var divs = document.getElementsByTagName('div');
function getQuoteHtml(key){
var i;
for(i =0 ; i < divs.length; i++){
if(divs[i].getAttribute('field') == key){
return divs[i].innerHTML;
}
}
}
Demo: Fiddle
you can use a css selector to do that
document.querySelectorAll('[field="bid"]');
I have a table with multiple rows, with each row having a button within the tag. There is also a link within each td tag that when the user clicks, THAT corresponding button is supposed to show, but when I click on the link, ALL the buttons show.
Here is the html:
<tr>
<td width="10%" align="center"></td>
<td width="80%" align="left"><span style="font-weight:bold;">About Me:</span> <input type="button" class="userDetails" style="display:none;" value="Save"/></td>
<td width="10%" align="center"></td>
</tr>
<tr>
<td width="10%" align="center"></td>
<td width="80%" class="originalText" align="left" valign="top">
'.$aboutMe.'
</td>
<td width="80%" class="aboutMe" align="center" valign="top">
<div style="display:none; font-weight:bold; color:red;" class="msgStatusText"></div>
<textarea class="textBox" cols="20" rows="auto" style="display:none;">
'.$aboutMe.'
</textarea>
</td>
<td width="10%" align="center"></td>
</tr>
and here is the jquery:
$(function(){
$(".editText").each(function(e){
$(this).unbind("click").click(function(e){//if user clicks on title (aboutMe,etc)
e.preventDefault();
//get handle for textArea //IF ANY EDITS, WILL BE IN THE VAR SECTION HERE
var textAreaHandle = $(this).parents("tr").next().find(".originalText"); //original userText
var oldTextValue = jQuery.trim($(textAreaHandle).text()); //trim value, else will not compare properly
var editTextBox = $(this).parents("tr").next().find(".textBox"); //handle for textarea
var fieldName = $(editTextBox).parent("td").attr("class"); //fieldName
var buttonHandle = $(this).parents("td").find(".userDetails");//WORKS, but gets ALL buttons, not just the corresponding one
var msgStatusHandle = $(this).parents("tr").next("tr").find(".msgStatusText");
The button is shown using the following code, which is ok, it's just the handle to the corresponding button (code above) that is messed up:
buttonHandle.css({"visibility":"visible"}).show();
There are multiple rows, each with the same structure as the one above so if user clicks on one row, only that corresponding button should show.
Somebody please tell my what I am doing wrong. Whatever I do, I can't seem to get this working.
Thanks a bunch!
Change this line:
var buttonHandle = $(this).parents("td").find(".userDetails");
To this:
var buttonHandle = $(this).closest('td').find('.userDetails');
The code below shows a rendered HTML (from Compiled ASP .Net code). I would not be able to make any changes to it including adding new attributes like ID.
I could still do something with Javascript but because there is no unique ID for the column, I could not replace the underscore text "____________" with some other text.
The plan is to replace the underscore in column 3 for each row with some other text. Is there a way to identify Column 3 with Javascript?
Thank you.
<table width='100%'>
<tr>
<td align="left" valign="top" class='clsReadOnly'>Row 1
</td>
<td align="left" valign="top" class='clsReadOnly'>
abc
</td>
<td align="left" valign="top" class='clsReadOnly'>
__________________________
</td>
</tr>
<tr>
<td align="left" valign="top" class='clsReadOnly'>Row 2
</td>
<td align="left" valign="top" class='clsReadOnly'>
def
</td>
<td align="left" valign="top" class='clsReadOnly'>
__________________________
</td>
</tr>
<tr>
<td align="left" valign="top" class='clsReadOnly'>Row 3
</td>
<td align="left" valign="top" class='clsReadOnly'>
ghi
</td>
<td align="left" valign="top" class='clsReadOnly'>
__________________________
</td>
</tr>
</table>
If this is the only table on the page, you can do it with jQuery:
$('table')
.children('tr')
.each(function() {
$(this).children('td:last').html('<p>A Paragraph of Text</p>');
});
It depends on what you are trying to accomplish. If this is how your table will always look, you could do the following:
var cells = document.getElementsByClassName('clsReadOnly');
cells[2].innerHTML = "Row1 Column3";
cells[5].innerHTML = "Row2 Column3";
cells[8].innerHTML = "Row3 Column3";
If you don't know how many columns you will start with, you would have to do this:
var rows = document.getElementsByTagName('tr');
for (var i=0; i<rows.length; i++) {
var cells = rows[i].getElementsByTagName('td');
cells[2].innerHTML = 'Row'+(i+1)+' Column3';
}
jQuery would make this much easier, as you can select by tag, by parent, etc. Of course, you can do all of this in plain JavaScript, but it takes a lot more work.
http://jsfiddle.net/bShZa/
getElementsByClassName() is HTML5 and is not currently supported in IE. Here is the jsfiddle for the solution http://jsfiddle.net/V38MF/2/ w/o jQuery needed
var myTable = document.getElements('td');
for(var i=0; i<myTable.length; i++){
if((i+1)%3 == 0)
console.log(myTable[i].innerHTML);
}