The idea is the following, if you click on a button for "show", an ajax-request will start, and the response will take place in a (hidden) <div>, and the <div> will come visible.
But the <div> gets placed wrong. it is in a <tr>, and should appear in it, between 1.1 and 1.2
Here is a fiddle, where i made an example, without the Ajax, it just display's/hide's the text "TEST"
http://jsfiddle.net/pt2w3/12/
How can this be solved correctly?
You forgot the cell (<td></td>):
<Label onclick="doShow()"> <p> ---- CLICK ME (show) ----- </p> </label>
<Label onclick="doHide()"> <p> ---- CLICK ME (hide) ----- </p> </label>
<table class="table">
<thead>
<th> TITLE 1 </th>
<th> TITLE 2 </th>
<th> TITLE 3 </th>
</thead>
<tbody>
<tr>
<td> 1.1</td>
<td> 2.1</td>
<td> 3.1</td>
</tr>
<tr>
<td><div class="class1" id="testdiv"><h1>TEST</h1> </div></td>
</tr>
<tr>
<td> 1.2</td>
<td> 2.2</td>
<td> 3.2</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/hescano/pt2w3/13/
Add an <td></td> tag to make the div display correctly:
Fiddle Example:
http://jsfiddle.net/agconti/pt2w3/14/
html
<Label onclick="doShow()"> <p> ---- CLICK ME (show) ----- </p> </label>
<Label onclick="doHide()"> <p> ---- CLICK ME (hide) ----- </p> </label>
<table class="table">
<thead>
<th> TITLE 1 </th>
<th> TITLE 2 </th>
<th> TITLE 3 </th>
</thead>
<tbody>
<tr>
<td> 1.1</td>
<td> 2.1</td>
<td> 3.1</td>
</tr>
<tr>
<td><div class="class1" id="testdiv"><h1>TEST</h1> </div></td>
</tr>
<tr>
<td> 1.2</td>
<td> 2.2</td>
<td> 3.2</td>
</tr>
</tbody>
</table>
Rendered like so:
---- CLICK ME (show) -----
---- CLICK ME (hide) -----
TITLE 1
TITLE 2
TITLE 3
1.1
2.1
3.1
TEST
1.2
2.2
3.2
It is invalid to place a div immediately inside a tr. You need to nest the div within a valid child of the tr instead. Otherwise, the browser will place the invalid element elsewhere, in this case it is positioning it before the table.
When in doubt, check the Specification. Specifically, check the Contexts in which this element can be used to know where you can place an element, and the Content model portion to understand what you can place immediately within that element:
Related
This question already has answers here:
Change table columns order
(4 answers)
Closed 1 year ago.
Firstly, My English is so bad. SORRY ABOUT THAT!
I have a table like this:
<table>
<tr>
<th> heading 1 </th>
<th> heading 2 </th>
</tr>
<tr>
<td> data 2 </td>
<td> data 2 </td>
</tr>
But sometime i want it like this (order of td & th tags has changed):
<table>
<tr>
<th> heading 2 </th>
<th> heading 1 </th>
</tr>
<tr>
<td> data 2 </td>
<td> data 1 </td>
</tr>
How I can accomplish this?
Thank you!
You can easily do it with css direction tag. And then change the table class using javaScript DOM.
var table = document.getElementById('table');
function changeDirection() {
table.className = "table-ltr";
}
.table-rtl {
direction: rtl;
}
.table-ltr {
direction: ltr;
}
<button onClick="changeDirection()">Switch</button>
<table class="table-rtl" id="table">
<tr>
<th> heading 1 </th>
<th> heading 2 </th>
</tr>
<tr>
<td> data 2 </td>
<td> data 2 </td>
</tr>
Hi there i have problem with Rails & Javascript. Here is my table in view.
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="adminrow">
<td>
1
</td>
<td>
John
</td>
</tr>
<tr id="adminrow">
<td>
2
</td>
<td>
Alex
</td>
</tr>
<tr id="adminrow">
<td>
3
</td>
<td>
Paul
</td>
</tr>
</tbody>
</table>
and my JS is
$('#select_name').click(function(event){
var username = $("#select_name").text();
console.log(username);
});
I have lot of names in my table, but JS printed first name in console. How can I print each name in the table to console?
You are creating in the each-loop N links (by the number of users) with the same select_name ID. Your javascript is confused, which one to choose. Try to add user id to your html select_name id and adjust your javascript accordingly. Same about your other id adminrow.
OR simply change your select_name to be a class and not id:
....
%a{:href=>"#", :class=>"select_name"}=u.firstname
....
$('.select_name').click(function(event){ ....
Ok, I am attaching the full code for you. For me it works just fine. E.g. prints just the name after clicking on the corresponding link:
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="adminrow">
<td>
1
</td>
<td>
John
</td>
</tr>
<tr class="adminrow">
<td>
2
</td>
<td>
Alex
</td>
</tr>
<tr class="adminrow">
<td>
3
</td>
<td>
Paul
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$('.select_name').click(function(event){
var username = $(this).text();
console.log(username);
});
</script>
I have an html.erb file where I'm creating a new row as I iterate over a collection. I need to be able to dynamically create an id per row, and then be able to specify that id in my .js file so that I can show/hide some of its contents when clicked.
#foo.html.erb file
<table>
<thead>
<tr>
<th> Group Name </th>
<th> </th>
<th> Count </th>
</tr>
</thead>
<tbody>
<% #groups.each do |group_name, count_for_group| %>
<tr id="unique_id"> #create unique id here
<td> <%= group_name %> </td>
<td> </td>
<td> <%= count_for_group %> </td> #this should be hidden. If the row this data belongs to is clicked, then show it. If clicked again, then hide it.
</tr>
<% end %>
</tbody>
</table>
And then I need to be able to show/hide that group's count when clicked, but I don't know how to find an id that was dynamically created:
#app/assets/javascripts/test.js
$(document).ready(function(){
$("#dynamic_group_id").on(“click”, function(e){ #somehow be able to specify the dynamically created id
#show/hide contents
});
});
You are abusing element IDs. Use IDs for truly unique identifiers.
For everything else there are other selectors - the most commonly used are classes.
$(".group").on('click', function() {
$(this).find('.hide-me').toggle();
});
console.log($(".group"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Group Name</th>
<th> </th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr class="group">
<td>The Beatles</td>
<td></td>
<td class="hide-me">4</td>
</tr>
<tr class="group">
<td>The Rolling Stones</td>
<td></td>
<td class="hide-me">4</td>
</tr>
</tbody>
</table>
I am trying to delete selected rows (via checkbox) but I don't understand where I am going wrong
this is my code
JQuery
$("#delete").click(function(){
$("table input[type ='checkbox']:checked").parent().parent().remove();
});
HTML
<div class = "patientData">
<div class ="searchBar">
<input type = "search" name = "search" class = "search">
<i class ="fa fa-search"></i>
<button id = "delete">Delete Selected</button>
</div>
<table style ="width:95%" class = "Info">
<tr>
<th><input type="checkbox" id="select"> </th>
<th> Name</th>
<th>Number</th>
<th>Date</th>
</tr>
</table>
</div>
The user enters the rows which is why my table by default only has headings. I have stuck on this for a while now and no research is helping me solving the problem.
Please help if anyone can, Thanks in advance.
You should use the :has selector to get all rows containing a checked box, rather than working your way back up to the parent. This will keep the selector at the row-level, preventing DOM changes from accidentally working up too many parents and deleting large chunks of the page.
Something like:
$("#delete-button").on("click", function(e) {
$("#delete-table tr:has(td > input[type=checkbox]:checked)").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="delete-button">Delete!</button>
<table id="delete-table">
<tr>
<th>
<input type="checkbox" />
</th>
<th>Header</th>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 1</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 2</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 3</td>
</tr>
</table>
This is what i have right now:
This is the table:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</table>
This is the javascipt
<script>
function hello(){
var r = document.getElementById("trId1").innerHTML;
alert(r);
}
</script>
The JavaScript gets E100 when its the first row is clicked which is correct but when E200 row is clicked it still shows E100, how would i get E200 and so on when there is more data? Is there a javascript only solution
To start, you can't have two Id's on the page that are the same as that is invalid HTML5 and will cause errors in some browsers. The reason why you're getting what you're getting is because when looking for an ID, most browsers only look for one occurrence of an ID (because that is precisely what valid HTML is, 1 unique id per page). So to fix up your HTML code and you may also want to have a header for your table:
<table border='1'>
<thead>
<tr>
<th>
Employee Code
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
<tr class='display' onclick='hello(1);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(2);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</tbody>
</table>
Your best bet is to getElementsByClassName function and traverse the array to the one you want. (general change, code) Assuming you can't use JQuery at all for some reason:
<script>
function hello(rowClickedNumber){
var RowClicked = document.getElementsByClassName("trId1");
var r = RowClicked[0].innerHTML;
alert(r); //E100
var r = RowClicked[1].innerHTML;
alert(r); //E200
var r = RowClicked[rowClickedNumber].innerHTML;
alert(r);
}
</script>
However, an even simpler solution would be to use JQuery and would limit browser inconsistencies. After the document loads:
$(body).on("click", "tr", function(){
var getData =$(this).children(".trId1").getHTML();
console.log(getData);
});
Note: this is to allow when you inevitably add more items to the table (hence the reason why the code to get a child element of a row).
*EDIT: added the note
**EDIT: fixed the spelling and grammer
* EDIT: fixed the javascript function.
I have a solution for this. Please check the code and fiddle link below. Let me know if you have any question.
Fiddle
HTML:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
</table>
JavaScript:
function hello(obj){
alert(obj.childNodes[1].innerText); //The first child being a text node.
}