I have a page that is using my ClientController and template to show a table of information that is retrieved from the server. For each collection of data I'd like to have 2 table rows, one that is always showing, and another which only shows when the first one is clicked.
I've simplified the code as there is a bit more going on here, but nothing that I would have thought would affect this.
My HTML looks like
<table>
<tbody ng-repeat="session in sessions" ng-switch on="sessionID">
<tr>
<td>{{session.test_name}}</td>
<td><a ng-click="showID(session.session_id)">view {{session.session_id}}</a></td>
</tr>
<tr class="pop-open" ng-switch-when="session.sessionID">
<td colspan="2">
{{session.session_ID}} and more details
</td>
</tr>
</tbody>
</table>
in my controllers.js i have
.controller('ClientController', ['$scope', function($scope) {
$scope.showID = function(sessionID){
$scope.sessionID = sessionID
alert($scope.sessionID)
}
}])
the alert pops-up with correct ID but the table rows aren't showing as I would have expected.
you actually dont need ng-switch for this simple use case scenario, add variable like showDetails on session, that should do it...
<table>
<tbody ng-repeat="session in sessions">
<tr>
<td>{{session.test_name}}</td>
<td><a ng-click="session.showDetails = !session.showDetails">view details</a></td>
</tr>
<tr class="pop-open" ng-show="session.showDetails">
<td colspan="2">
{{session.session_ID}} and more details
</td>
</tr>
</tbody>
</table>
TO KEEP ONLY ONE OPEN AT A TIME
<table>
<tbody ng-repeat="session in sessions">
<tr>
<td>{{session.test_name}}</td>
<td><a ng-click="showDetailsOfId = session.session_id">view details</a></td>
</tr>
<tr class="pop-open" ng-show="showDetailsOfId == session.session_id">
<td colspan="2">
{{session.session_ID}} and more details
</td>
</tr>
</tbody>
</table>
Related
I am trying to show some words in bold inside a table. That is, I am putting a sentence inside td tag, and I want to bold some words of that sentence.it is working when I put a string in Html and give to that word. but when I give a variable it is not working.
<table class="action_tables" border="1">
<tr>
<td class="header_column">Name1:</td>
<td class="content_column">this is <b>bold</b></td>
</tr>
<tr>
<td class="header_column">Name2:</td>
<td class="content_column">{{element[0].matched_keyword}}</td>
</tr>
<tr>
<td class="header_column">Subject1:</td>
<td class="content_column">{{element[0].nlp_matched_sentence}}</td>
</tr>
<tr>
<td class="header_column">bold value1:</td>
<td class="content_column">{{x}}</td>
</tr>
<tr>
<td class="header_column">bold value2:</td>
<td class="content_column"><span style="font-weight:bold">Your bold text</span></td>
</tr>
</table>
.ts file
element = [
{
id: 5636,
matched_keyword: "test",
nlp_matched_sentence:
"The <strong>Air Force</strong> Test Center"
}
];
after my research I got 3 solutions but none of them are working for me. please check the demo for more information.
stackbliz demo
Take a look at demo code
You need to add [innerHTML] as below:
<td class="content_column" [innerHTML]="element[0].nlp_matched_sentence"></td>
To set html content programatically, we need to use innerHTML.
To use innerHTML as a data binding, we need to use interpolation syntax => innerHTML = {{}}
To use innerHTML as property binding, we need to use square brackets syntax => [innerHTML]=""
Change your html code like below,
<table class="action_tables" border="1">
<tr>
<td class="header_column">Name:</td>
<td class="content_column">this is <b>bold</b></td>
</tr>
<tr>
<td class="header_column">Name:</td>
<td class="content_column">{{ element[0].matched_keyword }}</td>
</tr>
<tr>
<td class="header_column">Subject:</td>
<td class="content_column">
<div innerHTML="{{ element[0].nlp_matched_sentence }}"></div>
</td>
</tr>
<tr>
<td class="header_column">bold value:</td>
<td class="content_column"><div innerHTML="{{ x }}"></div></td>
</tr>
</table>
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'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.
Ive got a table of data and on each row the there is a button, onclick im trying to 'copy' that rows data, and 'paste' it into another div.
Here's my HTML:
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
Ive been trying to do this using:
$(function() {
$('addValues').click(function(){
var content = $('tr').html();
var newdiv = $("#selection");
newdiv.html(content);
$('#content').after(newdiv);
});
});
But cant quite get it to work, any ideas ?
Ive made a fiddle of the problem here - http://jsfiddle.net/9sZaX/2/
There are a few things wrong with your jsFiddle and/or code.
Don't use duplicate id attributes. It will cause unexpected results because jQuery will only select the first one found (which is expected, since there should only be one element with that id). Instead, give the <button>s a class attribute, like "addValues", and use this selector: $(".addValues").
Also, try setting the jsFiddle to actually use jQuery (set up on the left side of the page).
Another important problem was the fact that there is no element with the id of "content" on the page, so the .after() wasn't really doing anything.
Here's how I would set it up, depending on your actual requirements:
HTML -
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
JS -
$(function () {
$(".addValues").click(function () {
var $this = $(this),
myCol = $this.closest("td"),
myRow = myCol.closest("tr"),
targetArea = $("#selection");
targetArea.append(myRow.children().not(myCol).text() + "<br />");
});
});
DEMO: http://jsfiddle.net/RPd3v/2/
Need a little help with jQuery and HTML(table).
Pls take a look at my jsfiddle page to see what I am gonna try to do.
http://jsfiddle.net/nori2tae/U25EK/
Each TD contains certain value (from 01 to 06) and has CLASS name which is related to its value and the lists of buttons above the TABLE.
When the page initially loaded, all those buttons are enabled that means all TABLE DATA are visible.
When I click to turn on/off the button, i want jQuery to observe ON/OFF status of buttons and if the status matches to the values of each table row, i want jQuery to toggleSlide(show/hide) TABLE ROW.
(sorry about my poor english and explanation...)
For example, if I turn off button01 the row1 will be hidden. Then I turn button4 and button6 off, the row5 will be hidden. And so on or vice versa...
HTML:
<ul id="listBtns">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
<table id="tblResult">
<thead>
<tr>
<th></th>
<th>01</th>
<th>02</th>
<th>03</th>
<th>04</th>
<th>05</th>
<th>06</th>
</tr>
</thead>
<tbody>
<tr>
<th>row1</th>
<td class="val01">01</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>row2</th>
<td class="val01">01</td>
<td class="val02">02</td>
<td class="val03">03</td>
<td class="val04">04</td>
<td class="val05">05</td>
<td class="val06">06</td>
</tr>
<tr>
<th>row3</th>
<td class="val03">03</td>
<td class="val05">05</td>
<td class="val04">04</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>row4</th>
<td class="val02">02</td>
<td class="val04">04</td>
<td class="val05">05</td>
<td class="val06">06</td>
<td></td>
<td></td>
</tr>
<tr>
<th>row5</th>
<td class="val04">04</td>
<td class="val06">06</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>row6</th>
<td class="val03">03</td>
<td class="val02">02</td>
<td class="val04">04</td>
<td class="val06">06</td>
<td class="val05">05</td>
<td></td>
</tr>
</tbody>
</table>
JS:
$('#listBtns a').click(function() {
$(this).toggleClass('on off');
//and some function continues...
});
I am kinda stack and only can come up with very poor and inefficient codes(that perhaps might not work completely...) and I dont know which jQuery selector to use. please help me out.
Thanx.
Need one line only --
$(function() {
$('#listBtns a').click(function() {
$(this).toggleClass('on off');
$("#tblResult tr").eq($(this).text()).toggle('on off');
});
});
See demo
This will work as long as text and row number matches.
You can also use some thing like below, give an id to your table like "my_table" so that in case of multiple table s in a page it will affect only specific table. and by using 2,3 you can refer row number #2 and #3 should be hide and #4, #5 means row number #4 and #5 should be
display.
$("#my_table tr:nth-child(2)").hide();
$("#my_table tr:nth-child(3)").hide();
$("#my_table tr:nth-child(4)").show();
$("#my_table tr:nth-child(5)").show();
Call it on click event of any thing and check.