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?
Related
I am trying to select an element on a table which is on a webpage. The inner text which is on the table is a name of a professor. I am using this line of code to grab the elements.
var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");
And yes it works with the tables on the main webpage and grabs the elements I need. However when i try going on a different course page to grab the elements of another table it does not work even though all the tables have the same format. Its as if the tables are invisible to the code and only grabs the ones on the main webpage.
However every so know and then it grabs all the elements I need on a different course page but on very rare occasions.
The last line on the code below is the element I am trying to grab.
<table class="section-detail-grid table-bordered-wrap">
<thead>
</thead>
<tbody>
<tr data-id="80886" data-index="0" class="section-item section
first linked-section">
<td class="persist row-label">
COP
</td>
<td class=" row-label">
3514
</td>
<td class="persist row-label">
001
</td>
<td class="persist row-label">
Class Lecture
</td>
<td class=" row-label">
<div>Wang, Jing</div>
Someone mentioned that it may be an ajax driven site and thats why its not grabbing all the elements all the time. Ive even tried getting the xpath of that element but it is still not being found. Why is this element invisible to my code?
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
I need to extract the ID from ms-unselectedtitle which is a child element of ms-vb-title in a SharePoint 2007 list. This would then be concatenated with a url to open a new window. The window needs to open with the window.open() method so i can control the size and turn off menus. Creating a link in the list by calculated column won't work as it just opens a new window in a tab with all menus. I found code here ("How to get ID value from tables nested in other tables with jQuery") that is close but it returns an array of ID's, not by table row. I'm new to javascript/jquery so I'm a bit stuck. Note that the ID I'm using is embedded in the "Title" field of the list. Html section is here...
<TD class=ms-vb-title height="100%" sizset="50" sizcache011076027996994381="6">
<TABLE onmouseover=OnItem(this) id=284 class=ms-unselectedtitle height="100%"
cellSpacing=0 Type="" SUrl="" UIS="1024"
CId="0x010010381707B6E7FC45825D794C02F54155" CType="Item" MS="0" CSrc="" HCD=""
COUId="" OType="0" Icon="icgen.gif||" Ext="" Perm="0x400001f07ee71bef"
DRef="sites/site1/M/S/Lists/MAINT_ACTIONS" Url="/sites/site1/M/S/Lists
/MAINT_ACTIONS/284_.000" CTXName="ctx1" sizset="50" sizcache011076027996994381="6">
<TBODY beenthere="1">
<TR>
<TD class=ms-vb width="100%"><A onclick="GoToLink(this);return false;"
onfocus=OnLink(this) href="/sites/site1/M/S/Lists/MAINT_ACTIONS
/DispForm.aspx?ID=284" target=_self>Item <IMG class=ms-hidden border=0
alt="Use SHIFT+ENTER to open the menu (new window)." src="/_layouts/images
/blank.gif" width=1 height=1></A></TD>
<TD><IMG style="VISIBILITY: hidden" alt=Edit src="/_layouts/images
/menudark.gif" width=13></TD>
</TR>
</TBODY>
</TABLE>
</TD>
The code that is close is below...
// filter out all tables with immediate parent td.ms-vb-title
// returns a collection
var ids = $('.ms-unselectedtitle').filter(function() {
return $(this).parent('td').hasClass('.ms-vb-title');
// from resulting collection, grab all IDs
}).map(function() {
return this.id;
// convert to array
}).get();
Could someone help me here? Note that I'm trying to access the ID from a clickable link in the row.
I was able to resolve this by creating three columns in the SharePoint list with a final one to put them together.
getWin1 held ...onClick='javascript:window.open("... the first part of the
script and was made default text for this single line text column.
getWin2 held ...","_blank","toolbar=0,menubar=0,top=50,left=50,width=1024,
height=800,scrollbars=0,resizable=0,location=0");return false;'... the
second single line text column.
getUrl concatenated the url to the ID from the list.
=CONCATENATE("<span><input ",getWin1,getUrl,getWin2," type='image'
src='https://sof.socom.mil/sites/SORDAC/M/SharePoint_System_Files/Icons
/Magnification_16.png'/></span>")... was put into the last column to
combine the three columns.
I have Text to HTML CEWP to convert it to HTML script. Not the optimal solution but it works. Note that the ... just marks the start and end of the script.
From within a xhtml page created with JSF, I need to use JavaScript / jQuery for changing the content of a cell of a table. I know how to assign a unique id to the div containing the table, and to the tbody. I can also assign unique class names to the div itself and to the target column. The target row is identified by the data-rk attribute.
<div id="tabForm:centerTabView:personsTable" class="ui-datatable ui-widget personsTable">
<table role="grid">
<tbody id="tabForm:centerTabView:personsTable_data" >
<tr data-rk="2" >
<td ... />
<td class="lastNameCol" role="gridcell">
<div> To Be Edited </div>
</td>
<td ... />
</tr>
<tr ... />
</tbody>
</table>
</div>
I have tried with many combinations of different jQuery selectors, but I am really lost. I need to search my target row and my target column inside that particular div or inside that particular table, because the xhtml page may contain other tables with different unique ids (and accidentally with the same row and column ids).
Something like this?
$("#tabForm\\:centerTabView\\:personsTable tr[data-rk=2] td.lastNameCol div").text("edited");
Or if personsTable is unique enough in the current view
$("[id$=personsTable] tr[data-rk=2] td.lastNameCol div").text("edited");
Please check this fiddle for your new html code
Fiddle without colon
Fiddle with Colon
Please have a look at the fiddle below, the top row is not ordered correctly.
http://jsfiddle.net/J7WPb/1/
Once if you see, you will understand the problem.
EDIT: As the comment below says, user936625 doesn't have access to the HTML and cannot delete the faulty line. He is looking for a "script" as a solution.
You have colspan=2 on the 3rd line.. It should not span 2:
http://jsfiddle.net/J7WPb/8/
are you sure you want to colspan="2" on the first cell? this is what causes the table to be bad
Change:
<td colspan="2" id="Cell.0.0">
to:
<td id="Cell.0.0">
Your hidden columns (e.g. "Cell.0.1") are ignored when calculating colspans, so your cells with colspan=2 actually span into the answer columns. Remove the colspan, and it should work.