Develop Reference

Copy some <tr> in html by js

I'm need to copy some tr with inputs when onclick event is triggered, by clean JavaScript, not jQuery or something else, and generate ids for inputs. I attached my html. I'm new in js, whole what I found its copy one element. I'm be gradfull for any help.
<tr id='needToCopy'>
<tr style='height:16.5pt'>
<td></td>
<td colspan="" class="s4">
Label
</td>
</tr>
<tr style='height:18pt'>
<td></td>
<td colspan="3" class="s17">
Label1
</td>
<td class="s6">
<input id="firstID"/>
</td>
</tr>
<tr style='height:60.0pt'>
<td></td>
<td class="s15" colspan="3">
label2
</td>
<td class="s14">
<input id="secondID"/>
</td>
</tr>
<tr style='height:18.0pt'>
<td></td>
<td class="s15" colspan="3">
label3
</td>
<td class="s14">
<input id=thirdId"/>
</td>
</tr>
</tr>
<button onclick="copy()">Press Me</button>

If you are looking to copy the entire contents of the table, you can do it with a small bit of javascript. As mentioned in the comments, you can't have a table row inside a table row, so I'm not sure if you wanted your labels as table tds? For demo purposes I changed the surround <tr> to <table> tags. You can see the 'copy' functionality working in the snippet. I also added an id to your button.
EDIT: 2nd version is probably closer to what you're looking for (layout wise)
document.getElementById('copybtn').addEventListener('click', copybtn, false);
function copy() {
var html = $('#needToCopy').html();
$('#needToCopy tr:last').after("<tr>" + html + "</tr>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!--<table id='needToCopy'>
<tr style='height:16.5pt'>
<td></td>
<td colspan="" class="s4">
Label
</td>
</tr>
<tr style='height:18pt'>
<td></td>
<td colspan="3" class="s17">
Label1
</td>
<td class="s6">
<input id="firstID" />
</td>
</tr>
<tr style='height:60.0pt'>
<td></td>
<td class="s15" colspan="3">
label2
</td>
<td class="s14">
<input id="secondID" />
</td>
</tr>
<tr style='height:18.0pt'>
<td></td>
<td class="s15" colspan="3">
label3
</td>
<td class="s14">
<input id="thirdId" />
</td>
</tr>
</table>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<h2>Labels</h2>
<table id='needToCopy'>
<tr style='height:18pt'>
<td>Label 1</td>
<td>Label 2</td>
<td>Label 3</td>
</tr>
<tr style='height:60.0pt'>
<td class="s6">
<input id="firstID">
</td>
<td class="s15">
<input id="secondID" />
</td>
<td class="s14">
<input id="thirdId" />
</td>
</tr>
</table>
<button id="copybtn" onclick="copy()">Press Me</button>

cloneNode if you want to make copy of same node in html.
var div = document.getElementById('div_id'),
clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);

It's quite simple if you want to copy a element inside
just use this code:
$("#IDTag").clone();
if you wish to prepend or append it, you can do that too by using:
$('#td').prependTo('#IDTag');
Be sure to give a ID to your element before you expect the results!

How do I make an entire Table a button/link to another HTML page?

I have this table, that should be a button that link to another page. The reason is that the values of the table should be changeable with data from a database. The parameter can be changes to pH for example and the Value to 7 or something. But the table/button shall link to the same page. Where it is possible to set the Target.
So far this i what i got:
<table class="Button" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>
So how do i make it a link/button?

You can use onclick and redirect your page.
Or wrap your table with <a>
<table class="Button" onclick="location.href='yourpage.html'" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>

The same way as anything else.
You put an <a> element (with an href attribute) around it.

Wrap it into a link element:
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>
</a>
And if you wanna have a button, add a button element to that:
<button style="color:black; background-color:white; border-radius:5px;">
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23&#x2103</td>
</tr>
<tr>
<td class="Target">Target: 30&#x2103 </td>
</tr>
</table>
</a>
</button>

You can do it using javascript onClick event or put <a> tag around it
Html
<table class="button" onClick="linkTo('https://www.google.com')">
.
.
.
</table>
Java Script
<script>
function linkTo(var link){
window.location = link;
}
</script>
Css for mouse point
<style>
table.button{
cursor: pointer;
}
</style>

jQuery select various information from different <tr>

I'm working with the following HTML:
<tr class="oddrow">
<td>row1</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
</tr>
<tr class="evenrow">
<td>row2</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
<!-- The above line is the one I need. --!>
</tr>
There are 2 such rows (row1 and row2), alternating as an oddrow then evenrow. I have the entire HTML as a string in my JavaScript/jQuery code. I also have the information of the two three-letter abbreviations: in this example, WSH and SAC. What I need is the third <td style="text-align:center;"> of the row2 row. I should point out that there are several tables of row1 and row2 on the page, so I need a general selector. What I have been doing is just grabbing all the data in all the rows then parsing it from there, but the inconsistency of the data is making that more difficult. Is there a quick and dirty jQuery that will point me to the data I need?
I was thinking something like $("tr td:contains(" + abbrev + ") td:contains('row2')").text();, but that doesn't get it.
Can anyone help?

Your hierarchy in your selector is wrong, tds with the abbreviation are not an ancestor to the tds with the text of "row2"
You also need to ensure you have apostrophes around your abbrev variable.
Can you try:
$("tr td:contains('row2') td:contains('" + abbrev + "')").text()
Any chance you can add semantic classes instead? These sorts of selectors are gnarly to maintain.

Different number of Columns in rows of a table

Is it possible to create a table with different number of cells in each and every row with the same width and height ..?? If so how it can be done in a simpler way ..???
Note:
Row width and height are same
Cell width differs in each and every row
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
This is what i have tried using coll span ..Here let's say first row cells width is 30px,30px,30px . if i use coll span , it will be like 60px,30px but i want it as 50px,40px with only 2 cells
I want like this

You can use colspan to create cells that span multiple columns.
jsFiddle
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
If you want all to be the same width and height but only have the number of cells differ you can just not style certain cells in the <table>.
jsFiddle
<table>
<tr>
<td class="content"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
</tr>
</table>
Update
Your update with the image, yes you can accomplish this using colspan:
jsFiddle
<table>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
This uses four columns, the middle two are smaller than the others, here is an image that illustrates how the columns are set up:
Update #2
Here is an example of more randomly sizes cells. The first row 10%, 90% and the second row 55%, 45%.
jsFiddle
HTML
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
</table>
CSS
table {
width:100px;
}
td {
border: 1px solid #000;
height:1em;
}
tr:first-child td:first-child {
width:10%;
}
tr:first-child td:last-child {
width:90%;
}
tr:last-child td:first-child {
width:55%;
}
tr:last-child td:last-child {
width:45%;
}

Yes you can, with the colspan attribute for table cells, like this:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td colspan="5">2</td>
</tr>
<tr>
<td colspan="2">1</td>
<td>2</td>
<td colspan="2">3</td>
<td>4</td>
</tr>
</table>
Working example: http://jsfiddle.net/sk5cB/

Not positive that this is what you're looking for, but you could create a table with merged cells by using the colspan attribute in your <td> tags.
HTML colspan Attribute

You may also use and create a table in
<tr> </tr> tags

If you intend to insert content in those cells and prefer to maintain the same cell width then it is impossible using only tables. I've searched for solutions on this problem as well, it looks great when the cells are empty like Daniel Imms presented in his example, but if you add content to those cells their width starts getting bigger and the other cells on the row start getting smaller. Specifying table-layout:fixed doesn't help because then the first row becomes the rule for all following rows.
If you have the possibility to use divs with float left and width in percentage and a clear fix display:table div that wraps them all, just like Bootstrap 3 does in its grid system, then that'll be much more reliable.

resizable gridview columns

i have found this
Resizable Gridview columns using javascript
and happy to implement this http://www.ita.es/jquery/jquery.grid.columnsizing.htm but it is working on any table(
<table >
<tbody>
<tr class="first">
<td width="100">
</td>
<td width="200">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr></tbody></table>
) but creating problem on gridview render html table(
<table >
<tbody><tr>
<th ></th><th></th>
</tr><tr>
<td ></td><td>
</td><td>
</tr>
</tbody></table>
)

If you mean how to have that plugin work only on certain tables instead of all tables, change this line:
$("table").columnSizing()
To this instead:
$(".columnresize").columnSizing()
Then to any table you want it applied to, add class columnresize like this:
<table class="columnresize">
...
</table>