angularjs ng-repeat and create two tr - javascript

Im creating a toggable element. Im in need to create two tr`s for each ng-repeat.
i want the result below, when clicking the first tr, then it will show the second.
How can i create two tr-`s for each ng-repeat without making multiple tables?
// repeat start
<tr class="rowlink" ng-repeat="i in vm.something" ng-click="show other">
<td><div >some info here</div></td>
<td><div >info</div></td>
<td><div >something here </div></td>
<td><div >49</div></td>
</tr>
<tr class="my toggable element">
<td colspan="4>
<div>some info from the ng-repeat here too.
</div>
</td>
</tr>
// first repeat done
EDIT:
i could make ng-repeat in the tbody, but then i get multiple tbodys, and i dont want that neither :|

Something Like this
<table>
<tr ng-repeat-start="item in items">
<td>am there</td>
</tr>
<tr ng-repeat-end>
<td>am there too</td>
</tr>
</table>
Here is the example

Use an HTML5 parent, like tbody, and use the ng-repeat over it:
<tbody class="rowlink" ng-repeat="i in vm.something" ng-click="show other">
<tr>
<td>some info here</td>
</tr>
<tr>
<td>some other info here</td>
</tr>
</tbody>
This way, you'll end with two tr for each iteration of ng-repeat.
Edit
OP has asked to not use multiple tbody, so this isn't the answer he wanted. Nevertheless, this should be useful anyway to someone who has not those needings.

Related

How to replace between existing table rows in JavaScript

I am trying to regenerate a table with a new order, the problem i encounter is in the performance,
I Have something like this:
<table>
<tr id="row1"></tr>
<tr id="row2"></tr>
<tr id="row3"></tr>
<tr id="row4"></tr>
</table>
Obviously my table is much more complex, but what i would like is a solution with good performance for a replacing command
my target table should be something like:
<table id="mainTable">
<tr id="row3"></tr>
<tr id="row4"></tr>
<tr id="row1"></tr>
<tr id="row2"></tr>
</table>
When I redraw it the performance is bad(for more then 100 lines)
is there any way to just replace the rows between themselves without redrawing it?
Thanks
For rearranging them append them using append() or next()
$table = $('#mainTable');
$table.append($('#row1,#row2', $table));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mainTable">
<tr id="row1">
<td>1</td>
</tr>
<tr id="row2">
<td>2</td>
</tr>
<tr id="row3">
<td>3</td>
</tr>
<tr id="row4">
<td>4</td>
</tr>
</table>
The basic sultion is using jquery "after" function , which move the target element after the wanted element ..
$("#row1").after("#row4");
or if you want to sort the table based on its values , you can use plugins like : table sorter

Cheerio.js and working with subsets of the dom

I've having some issues (probably misunderstanding soemthing most likely) when reading the dom and using cheerio.js to do so from with a simple node.js app.
I'm using request to grab the html from a website and cheerio to navigate it find certain portions.
As and example the html looks like this....
<html>
<body>
<table>
<tr><td class="title"/>Title 1</td></tr>
<tr>
<td>
<table>
<tr>
<td class="dl">Some Name1</td>
</tr>
</table>
<td>
</tr>
<tr><td class="title"/>Title 2</td></tr>
<tr>
<td>
<table>
<tr>
<td class="dl">Some Name2</td>
</tr>
</table>
<td>
</tr>
<tr><td class="title"/>Title 3</td></tr>
<tr>
<td>
<table>
<tr>
<td class="dl">Some Name3</td>
</tr>
</table>
<td>
</tr>
</table>
</body>
</html>
What want to do it find all instances of the td with class title
grab the title text and thne for each one of those then grab the name at the td with class dl.
So far
$('td[class=title]')
will get me all the td with that class and using the each function
$('td[class=title]').each(function(i, elem)
lets me grab the text from each but I want to grab the title then the next td with the dl class before moving on to the next title.
I guess what I'm really asking is can I get that td.dl element while in the
$('td[class=title]'.each function?
Yes you can:
.each(function(){
$(this).parent().next().find('td.d1').text()
})

Taking the count of number of 'table' tags using jquery

This is my HTML code
<div class="tableStyle myWebsiteTable">
<table cellspacing="0" cellpadding="0" id="site0" class="site active">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr class="websiteDetails">
<td colspan="5">
<div id="websiteDetails0" class="divWebsiteDetails" style="display: block;">
<table>
<tbody>
<tr id="190">
<td>index</td>
<td></td>
<td></td>
</tr>
<tr class="addPage">
<td align="center" colspan="5"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr><!--Website Details-->
</tbody>
</table>
<table id="addNewSiteTable">
<thead>
<tr>
</tr>
</thead>
</table>
</div>`<br/>
Now table get added dynamically to this structure.I want to write some logic based on the no of table inside the first div.I tried doing this but did not work $('myWebsiteTable').children('table').length)
PLease suggest the correct way to achieve it
Thank you
You need to use . before class in Class Selector (“.class”)
Live Demo
$('.myWebsiteTable').children('table').length
Also make sure you have added jQuery and elements are added to DOM.
You may need to use find() as children will give you only first level childs where as find will get all the tables in descendants.
$('.myWebsiteTable').find('table').length
$('.myWebsiteTable').children('table').length
And if you actually want to count nested tables:
$('.myWebsiteTable table').length
i think it's class
http://api.jquery.com/class-selector/
$('.myWebsiteTable')
try this, this is more helpfull for you
Demo Here

Remove all but a specific row from a table

I want to remove all rows apart from the row with id 'row0' from a table:
<table class="mytable">
<tr id="row0" class="myrow">
<td>aaa</td>
</tr>
<tr class="myrow">
<td>bbb</td>
</tr>
<tr class="myrow">
<td>ccc</td>
</tr>
</table>
But the following JQuery code removes ALL rows:
$('.mytable').children().not('#row0').remove();
Could someone explain why this happens? I would think that the child with id 'row0' would be excluded, but obviously that's not the case.
I have found another way to do this but still curious why the above method doesn't work:
$('.mytable').find('tr:not(#row0)').remove();
Because the children of a table element are thead, tfoot or tbody elements. A tbody element is always created in the generated DOM, even if it is not explicitly written in the HTML code.
You can also do:
$('.mytable tr').not('#row0').remove();
or
$('#row0').siblings().remove();

Expand / Collapse HTML Tables

I have an HTML table which is generated dynamically from server.
I want to have an expand/collapse in this html table that is when I click on expand I should get a new column and rows and on collapse, it should be as it was before.
I don't want to use any 3rd party plugin for it. I want to use jQuery and Ajax.
Can you help me or provide any info on how can I do this?
Ok I think the question is too vague to be answered completely if you think about.
Where are the contents of the new columns, and rows, coming from? What structure do you have? What've you tried already? What didn't work? David Thomas comment.
If you don't want to use a jQuery plugin like this one it means you will have to do it yourself and a) nobody here will do it for you completely b) much less without any information, that would just be guessing.
That said here is a quick and dirty example of what your approach should be like.
HTML
<table border="1">
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
</table>
jQuery
$(".clickable").click(function() {
$(this).next().toggle();
});
As I said it's just an example, it's not scalable (doesn't even support hiding two rows) you can see a demo here.
I can update the answer with a better more personalized answer if you update your question.
But if you want to build it yourself, this are some of this could come in handy:
.show()
.hide()
.toggle()
.animate()
:nth-child
.children()
And many other depending on your approach.
Good luck!
Here is a quick example, I hope It helps if I understood your question correctly.
With this structure:
<a class="expand" href="#">Expand</a> | <a class="collapse" href="#">Collapse</a><hr />
<table id="mytable">
<thead>
<tr>
<td>
HEAD
</td>
<td>
HEAD
</td>
<td>
HEAD
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
</tbody>
</table>
Maybe you could do something like this:
$(document).ready(function () {
$(".expand").click(function () {
$("#mytable tbody").show("slow");
});
$(".collapse").click(function () {
$("#mytable tbody").hide("fast");
});
});
An accordion is a simple, elegant solution: javascript and css.
This fiddle is from the W3Schools explanation above.

Categories