Rearrange table rows in hardcoded table - javascript

I am unable to edit the HTML directly in a form and would like to move some things around. I created a very simplified version of what is going on below. So for example, if I would like to move the row with class "comments" to just below the row with class "matching" how could I do this on page load?
I tried doing something like:
$('tr.comments').closest('tr').after($('tr.matching').closest('tr'));
Here is the basic code, thank you for your help!! :)
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>


Try with this $('tr.matching').after($('tr.comments'));.
$('tr.matching').after($('tr.comments'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
</table>


$(".matching").after($(".comments"));

Related

Get a specific row from specific table with JavaScript?

Say my dynamic HTML looks something like this:
<table id="DanishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="19"><td>Company A</td><td>80</td><td>1980</td></tr>
<tr id="17"><td>Company B</td><td>12</td><td>1910</td></tr>
<tr id="26"><td>Company C</td><td>5000</td><td>2015</td></tr>
</table>
<table id="SwedishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="10"><td>Company D</td><td>500</td><td>1950</td></tr>
<tr id="12"><td>Company E</td><td>900</td><td>1990</td></tr>
<tr id="17"><td>Company F</td><td>90</td><td>2010</td></tr>
</table>
<table id="NorwegianCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="17"><td>Company G</td><td>105</td><td>1970</td></tr>
<tr id="18"><td>Company H</td><td>100</td><td>1980</td></tr>
<tr id="19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>
Each tr has an ID, but ID only relatively unique to the table, as other tables might have the ID, and the number of rows might vary.
How would I obtain the founding year (column 2) of a Swedish company with an id of 17?
I would imagine you would do it like this but I fail to find the correct code.
var table = document.getElementById("SwedishCompanies");
var row_index = ??? //should return 2
return table[row_index].cells[2].innerHTML;
I can't use getElementById just to get id "17", because I would risk getting Danish or Norwegian's company because the order of these tables is random.

you're just not using the right selector,
#DanishCompanies tr[id="17"]
will get you the tr with id 17 that's a child of DanishCompanies :
const row = document.querySelector('#DanishCompanies tr[id="17"]');
const year = row.cells[2].innerHTML;
console.log(year);
<table id="DanishCompanies">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr id="19">
<td>Company A</td>
<td>80</td>
<td>1980</td>
</tr>
<tr id="17">
<td>Company B</td>
<td>12</td>
<td>1910</td>
</tr>
<tr id="26">
<td>Company C</td>
<td>5000</td>
<td>2015</td>
</tr>
</table>
<table id="SwedishCompanies">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr id="10">
<td>Company D</td>
<td>500</td>
<td>1950</td>
</tr>
<tr id="12">
<td>Company E</td>
<td>900</td>
<td>1990</td>
</tr>
<tr id="17">
<td>Company F</td>
<td>90</td>
<td>2010</td>
</tr>
</table>
<table id="NorwegianCompanies">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr id="17">
<td>Company G</td>
<td>105</td>
<td>1970</td>
</tr>
<tr id="18">
<td>Company H</td>
<td>100</td>
<td>1980</td>
</tr>
<tr id="19">
<td>Company I</td>
<td>45</td>
<td>2000</td>
</tr>
</table>

this way (id with number values complicates the css select syntax)
function getTDval( tableId, rowId, colNum)
{
return document
.querySelector(`table#${tableId} tr[id="${rowId}"]`)
.cells[colNum].textContent
}
console.log( getTDval('SwedishCompanies','17',2) )
<table id="DanishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="19"><td>Company A</td><td>80</td><td>1980</td></tr>
<tr id="17"><td>Company B</td><td>12</td><td>1910</td></tr>
<tr id="26"><td>Company C</td><td>5000</td><td>2015</td></tr>
</table>
<table id="SwedishCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="10"><td>Company D</td><td>500</td><td>1950</td></tr>
<tr id="12"><td>Company E</td><td>900</td><td>1990</td></tr>
<tr id="17"><td>Company F</td><td>90</td><td>2010</td></tr>
</table>
<table id="NorwegianCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="17"><td>Company G</td><td>105</td><td>1970</td></tr>
<tr id="18"><td>Company H</td><td>100</td><td>1980</td></tr>
<tr id="19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>

It is invalid HTML to reuse the same id value within a page. You might use private data-... attributes for that.
Apart from that, the following line gets the human readable text of the third child node (third column in this case), which is the year (as a string).
document.querySelector('#DanishCompanies tr[id="17"]')
.children[2].innerText;

If you can't rely on getElmentById that means that you are doing something wrong, an id should be unique in the whole html. I suggest a new naming technique, you can concatenate the parent table id with the current row id. Example:
<table id="NorwegianCompanies">
<tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
<tr id="NorwegianCompanies17"><td>Company G</td><td>105</td><td>1970</td></tr>
<tr id="NorwegianCompanies18"><td>Company H</td><td>100</td><td>1980</td></tr>
<tr id="NorwegianCompanies19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>
In that way you can simply call
const row = document.getElementById(rowId)

playing sound onchange table content

I am trying to make a function which will play a sound when the value of a table field changes I tried it like this:
$(document).ready(function(){
$("#hor-zebra").change(function(){
document.getElementById('bflat').play()
});
});
Sorry I forgot my HTML:
<audio id="bflat" src="timbre.mp3"></audio>
<table id="hor-zebra" class="col-6" summary="">
<thead>
<tr>
<th scope="col">Ticket</th>
<th scope="col">Puesto</th>
</tr>
</thead>
<tbody>
<tr class="odd first">
<td class="first">A083</td>
<td class="first">MESA 1</td>
</tr>
<tr class="odd">
<td>B064</td>
<td>MESA 9</td>
</tr>
<tr>
<td>C028</td>
<td>MESA 5</td>
</tr>
</tbody>

Repeat across multiple elements (more than 2)

I know that I can use ng-repeat-start and ng-repeat-end to repeat two elements, <tr>s for example like this
<table>
<tr ng-repeat-start="item in list">
<td>Some text</td>
</tr>
<tr ng-repeat-end>
<td>More text</td>
</tr>
</table>
but how can I do the same for more than two elements? I want 3 <tr>s to be repeated for each item in list. Does Angular have other directives for this purpose or can I surround my repeated elements somehow, so as to be repeated for each item?
Example
<tr>
<td>Text</td>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td>More text</td>
</tr>

Try this
<table>
<tr ng-repeat-start="item in list">
<td>{{item}}</td>
</tr>
<tr>
<td>{{item}}</td>
</tr>
<tr ng-repeat-end>
<td>{{item}}</td>
</tr>
</table>
For more reference check above link: https://docs.angularjs.org/api/ng/directive/ngRepeat

Also a more simple way to do this without making this kind of ... weird thing, is the following :
<div ng-repeat="item in list">
<tr>
<td>{{item}}</td>
</tr>
<tr>
<td>{{item}}</td>
</tr>
<tr>
<td>{{item}}</td>
</tr>
</tr>
No need to use start, end .. for this particular use case

Find next row class after specific row class in each table rows

I need to hide unused toggle buttons with jQuery.
e.g. show toggle buttons only if after header <tr class="header"> next is data <tr class="data">
I have dynamic populated table that is as the code below:
<table>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
</table>

This will hide toggle buttons in which their parent rows with class header don't precede a row with class data:
$('.header').each(function() {
if(!$(this).next().hasClass('data')) {
$(this).find('.toggle').hide();
}
});
Fiddle

How to create Html table in table from server side visual basic

I'm working in asp.net, visual basic.
I need to create html table inside a table.
I need to create all through server side.
The table will be with 6 cols and n rows. in the last col (more data) will be a link, and when clicking on that link (let say on row2) it will expand the specific row and show another table with 5 cols and m rows
clicking on that link again will close the row and hide the inside table.
For now I just try to do it in the client side, a little example to me, but I'm stuck.
I have this for now:
<div id="shutfuyotTable">
<table class="tblShutaf" dir="rtl" runat="server">
<thead>
<tr>
<td>num</td>
<td>name</td>
<td>sum1</td>
<td>sum2</td>
<td>notes</td>
<td>moreData</td>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<tr>
<td colspan="5">
<table id="Table1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
<tr>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<tr>
<td colspan="5">
<table id="Table2">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<tr>
<td colspan="5">
<table id="Table3">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</td>
</tr>
</tr>
</tbody>
</table>
</div>
In the css I put row1 (id) as display: none;
I'm not manage to do the javascript, that when I'm clicking on the link it will show or hide the table.
What do I need to add in this code (Maybe onClick function?!?)
and what I need to do in javascript?

Categories

Resources