I have two hidden columns in my html table (I've tried to use hidden rows and the toggling worked great, but it messed up my rows count)
I want to toggle the hidden columns data in a row below the row that is shown.
My current state is that it's indeed toggling, but it covers the next row in the table.
Is there a way to create a temporary new row that will be placed below the clicked row that will toggle the hidden column data without hiding the next row?
Any help will be appreciated :)
This is my table which is being populated by PHP script:
if($SELECT != false)
{
while($rows = mysqli_fetch_array($SELECT))
{
echo "
<tr>
<td><label><input type=\"checkbox\" name=\"lead\" value=\"".$rows["email"]."\" /></label></td>
<td>".$rows["createdTime"]."</td>
<td>".$rows["firstName"]."</td>
<td>".$rows["lastName"]."</td>
<td>".$rows["email"]."</td>
<td>".$rows["phoneNumber"]."</td>
<td>".$rows["country"]."</td>
<td>".$rows["ip"]."</td>
<td>".$rows["affiliate"]."</td>
<td>".$rows["description"]."</td>
<td>".$rows["broker"]."</td>
<td>".$rows["status"]."<br> <br>
Comment:<b> ".$rows["comment"]."</b></td>
<td>".$rows["ftd"]."</td>
<td colspan=\"13\">
Transaction Id: ".$rows["transaction_id"]."
<br>
<br>
Balance: ".$rows["balance"]."
</td>
";
}
}
This is my toggle function:
$(function() {
$("tr").find("td[colspan=13]").hide();
$("table").click(function(event) {
if($(event.target).is('input')){
return;
}
else{
var $target = $(event.target);
$target.closest("tr").next().find("td").slideToggle(-2000);
}
});
});
First solution :
Why dont you just make a hidden row (after each visible row) with the columns that you want to display.And make it visible after you hover the first row?
Second solution :
Place the hidden data in a div and the displayed data in a div. Let both be childs of the td element. The tr height will scale if the hidden div gets displayed.
Related
I am making an Angular application which shows a table with a single tr. This row contains multiple td's which contain data. the table is built up like this:
<div class="col" id="TableCol">
<table id="Table">
<tbody>
<tr>
<td *ngFor="let item of items;">
<div
(click)="ItemSelected(item)"
draggable="true"
[class.selected]="item.id == selecteditem?.id"
(dragstart)="dragStart($event, item)"
(drop)="dropItem($event, item)"
(dragover)="dragoverItem($event, item)">
{{item.description}}
</div>
</td>
</tr>
</tbody>
</table>
</div>
The table is scrollable when it overflows its X value
#TableCol{ overflow-x: scroll; }
Now i have a function which adds a td at the right side of this tr.
When this function is called an extra td shows up into my table and scrolling works fine.
The thing I want to achieve is that the table automatically scrolls all the way to the right when I add a new td.
I've tried to call this function right AFTER I've added the new item to the items array.
this.items.push(item);
scrollRight() {
document.querySelector('#mapLocationTableCol').scrollLeft = 10000;}
and
scrollRight() {
document.querySelector('#mapLocationTableCol').scrollTo(10000, 0);}
Both these give the same result:
They scroll my row all the way to the right except for the last element.
I think this is due to the scrollRight() being called before the table is redrawn.
Anyone have a solution to make it scroll after the table is drawn?
edit: I've made a stackblitz example:
https://stackblitz.com/edit/angular-d6lm6k
You should monitor the creation of the table cell with ViewChildren and the QueryList.changes event. In the markup, set a template reference variable on the td elements:
<td #cells *ngFor="let item of items;">
In the code, use ViewChildren to get the list of these elements, and subscribe to the QueryList.changes event in ngAfterViewInit. If a new cell was added, do the scrolling. In the code below, I set a flag to make sure that automatic scrolling is performed only when desired.
#ViewChildren("cells") cells: QueryList<ElementRef>;
private shouldScrollRight = false;
...
addItem() {
this.shouldScrollRight = true;
this.items.push(item);
}
ngAfterViewInit() {
this.cells.changes.subscribe((cellList) => {
if (this.shouldScrollRight) {
this.shouldScrollRight = false;
this.scrollRight();
}
});
}
See this stackblitz for a demo.
I've a table with almost 100 rows, I'm displaying 20 as default by adding a class to the tr as visible and hiding the rest of rows by the class hidden
<tbody>
<tr class="visible"></tr>
<tr class="visible"></tr>
<tr class="hidden"></tr>
<tr class="hidden"></tr>
<tr class="hidden"></tr>
</tbody>
I've added an Add More button to display 5 rows each time the button is clicked but my jQuery logic is completely wrong, Have a look at it
$(".more-show").click(function (e) {
e.preventDefault();
for (var i = 0; i<5; i++) {
$('#ranking-table tr').each(function(i) {
$(this).removeClass("hidden").addClass("visible");
});
}
});
PROBLEM
Instead of displaying 5 rows each time upon click and it has to be the very first 5 hidden rows, It's displaying all the rows by changing the class to visible
You could use the selector $('#ranking-table tr.hidden:lt(5)') to select the first 5 tr elements with class .hidden. It makes use of :lt(5).
Example Here
$(".more-show").click(function (e) {
e.preventDefault();
$('#ranking-table tr.hidden:lt(5)').each(function(i) {
$(this).removeClass("hidden").addClass("visible");
});
});
i have a list of size and quantity that is inside the select box and a table,
everytime the user select on size and quantity the table is being highlighted
here is the jsfiddle link for my code
http://jsfiddle.net/19ehdn54/9/
what i want to do now is when user try to click on the table list the select box of size and quantity should change also, i've tried adding this code
$('#qty2 td').click(function() {
$('#qty2 .highlight td').removeClass('highlight2')
var textvalue = this.id;
$('select#size').val(textvalue).change();
});
the select box for sizes is updating but the quantity is not, and only the bottom table part is clickable,
any help is much appreciated. thanks!
I just found an answer to this and add this code
jQuery('#qty2 td').click(function() {
var e = jQuery(this);
var elementID = jQuery(this).attr('id');
var parentID = jQuery(this).parent().attr('id');
//remove class attribute to td
jQuery('#qty2 td').removeAttr('class');
//set highlight class to clicked column
e.addClass('highlight2');
jQuery('#size').val(elementID);
jQuery('#qty').val(parentID);
});
I want to fade out all cells in a column of my HTML-table when I click on a button in the Header of this col. For that I run the following JavaScript:
...
myDOMElement.find(".headerIcon").bind("click", function(event){
var colo = $(event.target).parent().attr("id"); // colNo is stored as Icons id
myDOMElement.find(".myTable").find("tr").find("#"+colo) // each tr has an id according to its colNumber
.each(function(index) {
$(this).fadeTo(0,0.2);
}
});
});
This works as desired but is relative slow even on tables with only 200 rows.
Is there a better (faster) way to do this?
"#"+colo is (must be!) a unique id. No reason for the cascaded finds - and if not, you are facing other problems:
...
myDOMElement.find(".headerIcon").bind("click", function(event){
var colo = $(event.target).parent().attr("id"); // colNo is stored as Icons id
$("#"+colo).fadeTo(0,0.2);
});
});
[edit]
As per the comments, in order to fade out Columns, the id must better hold information about row and column and will thus be unique per cell:
<tr>
<td id="1.1">scheme is <col>.<row></td>
<td id="2.1">
...
<tr>
<td id="1.2">
<td id="2.2">
...
...
myDOMElement.find(".headerIcon").bind("click", function(event){
var roco= $(event.target).parent().attr("id");
var col = roco.split('.')[0];
var row = roco.split('.')[1];
// now search all TD#s which have the clicked col (1.~) as a beginning of their ID
myDOMElement.find("td[id^='" + col + ".']").each(function(index) {
this.fadeTo(0,0.2);
});
});
see also jQuery Attribute selector
Since I dont need the animation provided by .fadeOut() I fond a faster way to do this:
myDOMElement.find(".myTable").find("tr").find("#"+colo).css({opacity:0.2});
I have 3 tables in my boostrap tab. Each tab as a table. The rows of this table is dynamically generated with csharp asp.net code. Right I Want a scenario were if a user click on the row of the first table, the clicked role of the first table get remove from the first table and is added to the rows of the second table.
My challenge as been getting to remove the row after the onClick process.
<tbody>
<tr id="kayode#yahoo.com">
<td> kayode <a class="chat" connectionid="135976e6-799b-4cda-a764-a00f7110d515"
data-parentid="kayode#yahoo.com"
href="/Visitor/StartChat?threadid=3&email=kayode%40yahoo.com"
operatorid="1" target="_blank" threadid="3">chat</a></td>
<td>271.0.0.1</td>
<td>Active</td>
<td></td>
<td>9/13/2014</td>
<td>04:15:18</td>
<td>02:52:55</td>
<td>271.0.0.1</td>
</tr>
</tbody>
My javascript code which I am trying to use to remove the row after the Click event.
function updateWaitingState(sender) {
var parentid = $(sender).attr("data-parentid");
//alert(parentid);
//we are going to remove the role from this field
var element = document.getElementById(parentid);
element.parentNode.removeChild(element); //This line is a problem says
//document.querySelector("tablebody4 first").appendChild(element);
console.log(element);
}
This is untested, but I imagine jQuery will greatly reduce your headache here:
function updateWaitingState(sender) {
var parentId = $(sender).attr("data-parentid");
$('#' + parentId).appendTo('.tablebody4:first');
}
You may need to adjust the selector in the appendTo function, as it was a guess on my part.
function updateWaitingState(sender) {
var parentid = $(sender).attr("data-parentid");
var element = document.getElementById(parentid);
$(element).appendTo('.tablebody2:first');
}