I'm designing a web-based solution and I have multiple tables that vary in size (record lengths) from 1 to 25 or so rows. I attempting to use the .after element by positioning the tables after the previous table, but I'm not sure how to implement. That is, my first table is positioned with an absolute setting, but I assume the remaining tables should be set with relative positioning, but relative to what?
Below is my test code without absolute positioning of tables and it works fine. But when I position the tables with absolute positioning, the insertadjacentHTML gets put at the top of the page. Note that I'm coding in ASP and pulling from a database and the number of rows returned varies and I want to position each table below the previous table.
<!DOCTYPE html>
<html>
<body>
<div id="table1">
<table border>
<tr>
<td>test</td>
</tr>
</table>
</div>
<div id="table2">
<table border>
<tr>
<td>table2</td>
</tr>
</table>
</div>
<div id="table3">
<table border>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
</table>
</div>
<script>
var h = document.getElementById("table3");
h.insertAdjacentHTML("afterend", "<span style='color:red'>My span</span>");
</script>
</body>
</html>
Related
I would like to add a new element with jQuery with DOM-manipulation but I'm a little bit confused with all the functions like eq, nth and so on.
Here is my base construct:
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
Here should be the DOM-Manipulation
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
Where the "Here should be the DOM-Manipulation" I would like to insert a new tablerow.
Use this:
$(".tableInput").eq(3).find('tr').append('<tr><td>Hello World..!</td></tr>');
.tableInput{border:1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
:eq() allows you to access the elements in the jQuery object by index
http://api.jquery.com/eq-selector/
:nth-child also allows you to access the an element by index, however it only applies to the term to the immediate left of it.
http://api.jquery.com/nth-child-selector/
You need to use .after
$(document).ready(function(){
$tr = '<tr><td>Hello</td></tr>';
$('#myTable tr:first').after($tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput" id="myTable">
<tr>
<td></td>
</tr>
</table>
You can add table row with following ways :
1. Via append :
a. Without declaring element before :
$("#tableInput").last().append('<tr><td></td></tr>');
b. With declaring element :
var tableRow = $('<tr><td></td></tr>');
$("#tableInput").last().append(tableRow);
Via after :
var tableRow = $('<tr><td></td></tr>');$("#tableInput").last().children().after(tableRow);
Just append a new table row to the last <table> element like this
$('table:last').prev().append('<tr><td>Here is your new table row</td></tr>')
table{
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td>A</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>B</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>C</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>D</td>
</tr>
<!--Here should be the DOM-Manipulation !-->
</table>
<table class="tableInput">
<tr>
<td>E</td>
</tr>
</table>
:eq() allows you to access the elements in the jQuery object by index
http://api.jquery.com/eq-selector/
:nth-child also allows you to access the an element by index, however it only applies to the term to the immediate left of it.
http://api.jquery.com/nth-child-selector/
The example is as follows:
see : DEMO
or:
<body>
<select>
<option>1</option>
<option>2</option>
<option>......</option>
<option>21</option>
</select>
<div style="overflow:auto;height:50%;width:50%">
<table border="1">
<tr>
<th>Rowno</th>
<th>Savings</th>
<th>Title</th>
</tr>
<tr>
<td>1</td>
<td>$100</td>
<th>t1</th>
</tr>
<tr>
<td>2</td>
<td>$300</td>
<th>t2</th>
</tr>
<tr>
<td>3</td>
<td>$400</td>
<th>t3</th>
</tr>
</tr>
</tr>
<tr>
<td>4</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>5</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>6</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>7</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>8</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>21</td>
<td>$200</td>
<th>t5</th>
</tr>
</table>
</div>
</body>
As the example in the jsfiddle above,assuming that the row 21st. is invisible in the table unless you scroll the scrollbar to the bottom,so if I want to move the the row 21st. of the table to be visible in the table when selecting a rowno in the select options by using js or jquery,could you please tell me how to write this js? thanks.
If you are using Jquery. You can use the hide function. Your would require a class.
$('.trhideclass1').hide();
<tr class="trhideclass1">
<td>......</td>
</tr>
I am currently developing a tool to display large amount of data in different tables. Different amount of data from one table has to be assigned into another table more than once. This view takes almost 20 seconds to load and i want to lower the time by manipulating the DOM instead of assigning every match within PHP. I want to place a few identifiers hidden in the first table and on click of one row, show the additional data within the next element.
Here is an example how the Tables look before:
<table>
<tr>
<th>Name</th>
</tr>
<tr class="iWantToClickThis">
<td>Bla Bla</td>
<td style="visibility:hidden;">3,5</td>
</tr>
</table>
<table style="visibility:hidden">
<tr>
<th>Additional Header</th>
</tr>
<tr id="1">
<td>Additional Info 1</td>
</tr>
<tr id="2">
<td>Additional Info 2</td>
</tr>
<tr id="3=>
<td>Additional Info 3</td>
</tr>
<tr id="4">
<td>Additional Info 4</td>
</tr>
<tr id="5">
<td>Additional Info 5</td>
</tr>
<tr id="6">
<td>Additional Info 6</td>
</tr>
</table>
And after the click:
<table>
<tr>
<th>Name</th>
</tr>
<tr class="iWantToClickThis">
<td>Bla Bla</td>
<td style="visibility:hidden;">3,4,5</td>
</tr>
<tr>
<td colspan="2>
<table>
<tr>
<th>Additional Header</th>
</tr>
<tr id="3">
<td>Additional Info 3</td>
</tr>
<tr id="5">
<td>Additional Info 5</td>
</tr>
</table>
</td>
</table>
I've found out how to achieve this with a single row but how do i do that with different, identitying them by their ids?
Im pretty new to web dev, so please excuse my probable stupidity. and ive got a small display thing. I have a table with a table in it as one of the tds. I want the inner table part of it to have like a composite heading. In the example below the heading would be Hobbies, and the under it the headings of the hobbies table that would NUMBER, HOBBY and DESCRIPTION. So if you look at the entire table the headings are NAME, SURNAME, JOB and then on a level higher HOBBIES with the sub headings on the same level as the first ones. I hope this makes sense. How can i achieve something like this
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Job</th>
<th>Hobbies</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>McJohnson</td>
<td>Dentist</td>
<td>
<table>
<tbody>
<tr>
<td>1</td>
<td>Lego</td>
<td>I like to play Lego</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Something like this? could be styled better but you get the idea...you will have to use js I think if you want the heading moved up seperate from the second table
td table{display:none;}
tr td:nth-child(4){background-color:gray;}
td:hover table{position:absolute;left:200px;background-color:yellow;display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Job</th>
<th>Hobbies</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>McJohnson</td>
<td>Dentist</td>
<td>Hover Me
<table>
<thead>
<tr>
<th>Number</th>
<th>Hobby</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lego</td>
<td>I like to play Lego</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>John</td>
<td>McJohnson</td>
<td>Dentist</td>
<td>Hover Me
<table>
<thead>
<tr>
<th>Number</th>
<th>Hobby</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lego</td>
<td>I like to play Lego</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
/th
I have a html-table, that has a header, that is supposed to be clickable to sort the rows on the clicked column. The tricky part here is, that there are some rows in the table, that shouldn't be sorted and the rows, that belong to that specific row should remain under that row. Here is some code so you get what I'm talking about.
<table>
<thead>
<tr>
<th>User</th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Peter</th>
</tr>
<tr>
<td></td>
<td>Apple</td>
<td>10</td>
</tr>
<tr>
<td></td>
<td>Pineapple</td>
<td>15</td>
</tr>
<tr>
<th colspan="5" style="text-align:left;">Stan</th>
</tr>
<tr>
<td></td>
<td>Banana</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td>Orange</td>
<td>10</td>
</tr>
</tbody>
</table>
So if I click for example on the Item-Header, the Apple + Pineapple rows should remain between the Peter and the Stan row while being sorted. If I click on the User-Header, Peter and Stan should be sorted, while the Items Apple + Pineapple remain under the Peter row and the Banana and Orange Items remain under the Stan row ... I hope you get what I mean.
I have already tried it with the jquery tablesorter-plugin but I couldn't find any solution that was working for me.
You'll need to enclose each block of rows in a separate tbody.
Then clicking on User will only sort the tbodys, and clicking on the other ths will sort each tbody separately.
EDIT
The table should look like this:
<table>
<thead>
<tr>
<th>User</th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Peter</th>
</tr>
<tr>
<td></td>
<td>Apple</td>
<td>10</td>
</tr>
<tr>
<td></td>
<td>Pineapple</td>
<td>15</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Stan</th>
</tr>
<tr>
<td></td>
<td>Banana</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td>Orange</td>
<td>10</td>
</tr>
</tbody>