I have below piece of code which is not working as expected. I am trying to create hidden th and td tags inside single row. There are multiple th and td tags in one row and I need to make them visible via javascript on some condition :
<table>
<tr>
<div id ="test1" style ="display:none">
<th>Test1>
<td><div class="test1"></div></td>
</div>
<div id ="test2" style ="display:none">
<th>Test2>
<td><div class="test2"></div></td>
</div>
</tr>
</table>
This is not hiding TH/td tags. If I try to create different ids for th and td (without using div) and then set it's display as none , then when value of divs(test1 and test2) is populated it comes in second line(result2) rather than getting aligned with TH(Result1)
Any idea how can be it done so that my display is like below:
Result1
Test1 test1Value
Test2 test2value
Result2
Test1
test1Value
Test2
Test2Value
As mentioned in the comments, the issue is with the code being invalid. To fix this issue:
Restructure the table in a valid way.
Add similar classes to the cells related to the same test.
Hide/show the cells based on the class
For example, here is a demo code based on the HTML above and your comments (I used d3.js as the question is tagged with it):
function hideTest1() {
d3.select("body").selectAll(".test1_cell").style("display", "none");
}
function showTest1() {
d3.select("body").selectAll(".test1_cell").style("display", "table-cell");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<table>
<tr>
<th class="test1_cell">Test1></th>
<td class="test1_cell"><div class="test1">Result Test 1</div></td>
<th class="test2_cell">Test2></th>
<td class="test2_cell"><div class="test2">Result Test 2</div></td>
</tr>
</table>
<button onclick="hideTest1()">Hide Test 1</button>
<button onclick="showTest1()">Show Test 1</button>
Just click on the buttons to show/hide the cells related to test 1. You can also see the demo on this JSFiddle: http://jsfiddle.net/ud9bgo8c/
Related
I have a multi column table where one td contains the order status and another td contains a button tag. What I want to achieve is to hide the button tag if the order status is set to 'Part complete' and show the button if the status is set to 'Not complete'. Below is html of one of the tr's in the table -
<tr class="order-row ui-sortable-handle" data-index="46929" data-position="4">
<td style="text-align:center">4</td>
<td style="text-align:center">46929</td>
<td style="text-align:center">13/12/2021</td>
<td style="text-align:center">PS Machine shop (X)</td>
<td style="text-align:center">PSMAC</td>
<td style="text-align:center">Part complete</td>
<td style="text-align:center">1</td>
<td style="text-align:center"><button class="hide-unassign unassign-button" type="button"><i class="icon_fa fas fa-trash"></i></button></td>
</tr>
I am using jQuery to .addClass hide-unassign to the button tag, css below -
.hide-unassign {
display: none;
}
This works fine in hiding the button tag, but I am having no luck in only applying it if the value in the status td contains the text 'Part complete'.
Here is the jQuery I am running -
$("#Orders-Allocated").each(function(){
$('.button').has('.td:contains("Part complete")').addClass(' hide-unassign');
});
and this adds the hide-unassign class to all button elements on all rows. Not what I want to achieve.
Any advice would be greatly appreciated.
You selected the button but you should select the table row. Also you added dots to 'button' and 'td'. Dots mean that they are classes. Elements don't have a prefix with dots
So here is an example that could work
$('tr')
.has('td:contains("Part complete")')
.find('button')
.addClass('hide-unassign');
Instead of tr you could also use .order-row. Or if the #Orders-Allocated is the table row context/Id you can use this
I'm working on a shift arrangement app. In it I'm trying to create two tables that show which possible shifts each user has selected.
Both tables display the same data, but arrange it differently. Each table cell has a number of check-boxes that display the possible shifts for each person (in table 1) or the possible people for a shift (in table 2). A checkbox from table 1 that displays shift A option for person X will have the same data-bind as its equivalent checkbox in table 2, which displays person X option for shift A.
The purpose of this is to update the equivalent data in both tables simultaneously when the user couples a person with a shift. The problem: when a checkbox in table 1 is checked/unchecked, all of the check-boxes in table 2 gets checked/unchecked, as shown below:
Here is my template:
<div class="table-container" dir="ltr">
<h3>People</h3>
<table>
<thead>
<th>Name</th>
<th>Options</th>
</thead>
<tbody>
<tr *ngFor="let user of userPreferences">
<td>{{user.name}}</td>
<td>
<div *ngFor="let selection of userYesses[user.name]">
<mat-checkbox class="option-checkbox" dir="ltr" [(ngModel)]="selection.isSelected" name="usc">{{selection.option}}</mat-checkbox>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-container" dir="ltr">
<h3>Shifts</h3>
<table>
<thead>
<th>Time</th>
<th>Options</th>
</thead>
<tbody>
<tr *ngFor="let shift of totalShifts">
<td dir="ltr">{{shift.time}}</td>
<td>
<div *ngFor="let selection of shiftYesses[shift.time]">
<mat-checkbox class="option-checkbox" [(ngModel)]="selection.isSelected" name="syc">{{selection.name}}</mat-checkbox>
</div>
</td>
</tr>
</tbody>
</table>
</div>
And here is relevant component code:
this.userPreferences.forEach(u => {
this.userYesses[u.name] = [];
u.preferences.shifts.forEach(week => {
week.forEach(day => {
if (!day.shifts) return;
day.shifts.forEach(shift => {
if (!this.shiftYesses[`${day.date} ${shift.time}`]) this.shiftYesses[`${day.date} ${shift.time}`] = [];
if (shift.isSelected) {
let selection = new Selection(`${day.date} ${shift.time}`, u.name);
this.userYesses[u.name].push(selection);
this.shiftYesses[`${day.date} ${shift.time}`].push(selection);
}
});
});
});
});
The code seems alright to me, am I missing anything? Maybe it's a bug in Angular?
Thanks in advance!
In case anyone else experiences this issue -
After a few days of struggling with this, I stumbled upon this issue from Angular's git - https://github.com/angular/angular/issues/9230
I've read the following in kara's answer:
In the case that you don't want to register a form control, you currently have a few options:
1 - Use ngModel outside the context of a form tag. This will never throw.
<input [(ngModel)]="person.food">
After reading this, I switched the <form> tag into a <div> and everything works as expected now.
How can I change the background of a table cell dynamically in HTML using AngularJS ?
In the following code I want to show a table with a bunch of names and the including status of an object. The status can weather be VALID (green background) or INVALID (red background).
Can this problem be solved in my <td> HTML tag or do I have to move on to CSS ?
<table border="1">
<tr ng-repeat="object in Cmd.items">
<td>{{object.objectName}}</td>
<td>{{object.objectStatus}}</td> //this background should be colored
</tr>
</table>
You can do this using ng-class:
<tr ng-repeat="object in Cmd.items">
<td>{{object.objectName}}</td>
<td ng-class="{'red': object.objectStatus === 'invalid', 'green': object.objectStatus === 'valid'}">{{object.objectStatus}}</td>
</tr>
Fiddle
you can use ng-class
e.x. :
<div ng-class={'green-bg':isValid, 'red-bg':!isValid}> </div>
green-bg and red-bg
are css classes and isValid is property, where you know expression isValid or no
CSS :
.invalid{
background-color:red;
}
.valid{
background-color:green;
}
HTML
<table border="1">
<tr ng-repeat="object in Cmd.items">
<td>{{object.objectName}}</td>
<td ng-class="object.objectStatus">{{object.objectStatus}}</td> //this background should be colored
</tr>
</table>
It can be solved both in the td tag or/and in your external css.
In Html
<td ng-style="{'background': (object.objectStatus=='VALID') ? 'green' : 'red'}">
{{object.objectStatus}}
</td>
With external css You can use #oto lolua implementation
I have table without any class or id (there are more tables on the page) with this structure:
<table cellpadding="2" cellspacing="2" width="100%">
...
<tr>
<td class="cell_c">...</td>
<td class="cell_c">...</td>
<td class="cell_c">...</td>
<td class="cell">SOME_ID</td>
<td class="cell_c">...</td>
</tr>
...
</table>
I want to get only one row, which contains <td class="cell">SOME_ID</td> and SOME_ID is an argument.
UPD.
Currently i am doing iy in this way:
doc = Jsoup.connect("http://www.bank.gov.ua/control/uk/curmetal/detail/currency?period=daily").get();
Elements rows = doc.select("table tr");
Pattern p = Pattern.compile("^.*(USD|EUR|RUB).*$");
for (Element trow : rows) {
Matcher m = p.matcher(trow.text());
if(m.find()){
System.out.println(m.group());
}
}
But why i need Jsoup if most of work is done by regexp ? To download HTML ?
If you have a generic HTML structure that always is the same, and you want a specific element which has no unique ID or identifier attribute that you can use, you can use the css selector syntax in Jsoup to specify where in the DOM-tree the element you are after is located.
Consider this HTML source:
<html>
<head></head>
<body>
<table cellpadding="2" cellspacing="2" width="100%">
<tbody>
<tr>
<td class="cell">I don't want this one...</td>
<td class="cell">Neither do I want this one...</td>
<td class="cell">Still not the right one..</td>
<td class="cell">BINGO!</td>
<td class="cell">Nothing further...</td>
</tr> ...
</tbody>
</table>
</body>
</html>
We want to select and parse the text from the fourth <td> element.
We specify that we want to select the <td> element that has the index 3 in the DOM-tree, by using td:eq(3). In the same way, we can select all <td> elements before index 3 by using td:lt(3). As you've probably figured out, this is equal and less than.
Without using first() you will get an Elements object, but we only want the first one so we specify that. We could use get(0) instead too.
So, the following code
Element e = doc.select("td:eq(3)").first();
System.out.println("Did I find it? " + e.text());
will output
Did I find it? BINGO!
Some good reading in the Jsoup cookbook!
I have a table and I want certain tr to have the same css class as the tr before it.
in the example below the tr with class="?" should have the same class as the ones above.
is this possible?
<table>
<tr class="red">
<td></td>
</tr>
<tr class="?">
<td></td>
</tr>
<tr class="blue">
<td></td>
</tr>
<tr class="?">
<td></td>
</tr>
</table>
based on Karl idea.
Use Jquery
http://jsfiddle.net/forX/KBfzD/
$(function(){
$(".unknown").each(function()
{
$(this).removeClass("unknown");
$(this).addClass(
$(this)
.prev()
.attr("class")
);
});
});
I change the ? for unknown. I dont know how to use ? in css/css selector.
Try this:
HTML:
<table border="1" style="border-collapse:collapse;">
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
jQuery:
$(function(){
$("tr").addClass("red");
$("tr:nth-child(4n)").removeClass("red").addClass("blue")
.prev().removeClass("red").addClass("blue");
});
This will select every 4th child, remove the red CSS class, add the blue CSS class and the move to the previous element and do the same.
Note: Here is a jsFiddle that you can play around with.
Every html element is addressable with css, so in the stylesheet of your css,if you decalre like element{
set the desired property ;
}
In this case the element would be tr all the table rows will have the properties you have set in above general declaration ,and if you want to override the specific values to some of your table rows you can address them like using the class
I am not pretty sure about understanding this problem but:
in css: tr.classname + tr gives you the next tr from tr which has a classname. See this Fiddle.
You can also checkout css nth-child,even & odd selectors.
Based on what you have mentioned, this is the fiddle.
It just checks the previous element of class: ?
without javascript, you can play with element:li:nth-child(x) values
can be anything like n, n+1, 2n+1, etc... and you can give them different values.