Develop Reference

Clone text from several elements to an a href as a mailto subject

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.

javascript colspan dynamically while delete cell?

could anyone help me on my code?
I try to make a sample code on the following action:
1. when the user click on the button, the "hello" will take cell 1 and cell 2 while the other cell 3 to 10 will remain.
2. When the user click on the button again, nothing happen.
I try to set a flag to false after the user click on it to let nothing happen if user click again; however, it doesn't work at all. The user can click until the first row's cells deleted just left "hello".
Any solution in javascript or JQuery? I try to search for static variable in javascript but seem impossible.
Thank you in advance.
var flag = false;
function clickhere(){
if(flag = true){
var cell = document.getElementById('a');
document.getElementById("row").deleteCell(1);
cell.setAttribute("colspan", 2);
cell.innerHTML = "hello";
flag=false;
}
}
<table border="1">
<tr id="row">
<td id="a">1</td>
<td id="b">2</td>
<td id="c">3</td>
<td id="d">4</td>
<td id="e">5</td>
</tr>
<tr>
<td id="f">6</td>
<td id="g">7</td>
<td id="h">8</td>
<td id="i">9</td>
<td id="j">10</td>
</tr>
</table>
<input type="button" value="Click" onclick="clickhere();"/>

You have a couple of opportunities to address. Firstly, your if is doing an assignment rather than a a comparison. Since your flag is a boolean we can use it directly. Secondly, your initial assignment and the one at the end of the function should probably be opposite.
Here is one way you might correct things.
var flag = false;
function clickhere(){
if(flag){ return; }
flag = true;
var cell = document.getElementById('a');
document.getElementById("row").deleteCell(1);
cell.setAttribute("colspan", 2);
cell.innerHTML = "hello";
}
<table border="1">
<tr id="row">
<td id="a">1</td>
<td id="b">2</td>
<td id="c">3</td>
<td id="d">4</td>
<td id="e">5</td>
</tr>
<tr>
<td id="f">6</td>
<td id="g">7</td>
<td id="h">8</td>
<td id="i">9</td>
<td id="j">10</td>
</tr>
</table>
<input type="button" value="Click" onclick="clickhere();" />

add class to multiple titles using the title text

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/

How to iterate over table and define class for tds of trs?

I have a table like that:
<table id="myTable" cellspacing="0" cellpadding="10" border="0" width="100%">
<tbody>
....
<tr style="color: blue;" id="bankRecord377">
<td align="center" class="styleOdd"> <input type="checkbox" value="377" name="377"></td>
<td align="center" class="styleOdd">377</td>
<td align="center" class="styleOdd"></td>
<td align="center" class="styleOdd">391</td>
</tr>
....
<tr style="color: blue;" id="bankRecord386">
<td align="center" class="styleEven"> <input type="checkbox" value="386" name="386"></td>
<td align="center" class="styleEven">386</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">396</td>
</tr>
...
<tr style="color: blue;" id="bankRecord322">
<td align="center" class="styleEven"> <input type="checkbox" value="322" name="386"></td>
<td align="center" class="styleEven">322</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">314</td>
</tr>
...
</tbody>
</table>
class="styleOdd" makes row gray background class="styleEven" makes row background blue. I iterate over that table with Struts2 and define classes but user can remove some of table rows when he sees that HTML file. If user remove one of the table row, e.x. :
<tr style="color: blue;" id="bankRecord386">
...
</tr>
Colors of background was gray, blue, gray. However it is gray, gray now(because user removed a tr which includes classEven tds).
All in all what I want is iterate over that table again and defining classes styleOdd, styleEven, styleOdd, styleEven... again.
How can I do it with JavaScript or JQuery?
PS: I want to it for my table(which has id=myTable)'s every tds of trs.
EDIT: I want it except for the first tr(and it's tds).

You can use :even and :odd, but then you would iterate over the table rows twice. That might lead to unacceptable performance if your table has many rows.
I'd suggest using each() instead:
$("#myTable tr").each(function(index, row) {
var $cells = $("td", row);
if (index & 1) {
// Odd.
$cells.removeClass("styleEven").addClass("styleOdd");
} else {
// Even.
$cells.removeClass("styleOdd").addClass("styleEven");
}
});

You can use the :odd selector to target odd rows. (there is also a :even selector)
$('.td:odd').class('odd');
Trigger this when removing a row from the table to update classes.
There are also both CSS Selector but not widely supported.

$('#myTable tr:odd td').toggleClass('styleOdd', true).toggleClass('styleEven', false);
$('#myTable tr:even td').toggleClass('styleOdd', false).toggleClass('styleEven', true);
I believe you could also do it automatically using CSS. Although it requires a fairly modern browser.
Updated to take into account the table ID

How to replace text in a column (inside a table) with Javascript without any ID

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);
}