Access rows from different tables using row IDs - javascript

Suppose I have two different tables as below:
<table id="T1">
<tr id="a">
<td>a</td>
</tr>
<tr id="b">
<td>b</td>
</tr>
</table>
<table id="T2">
<tr id="a">
<td>A</td>
</tr>
<tr id="b">
<td>B</td>
</tr>
</table>
These two tables have different IDs. However, due to design, some of their rows, when created, have the same IDs. In this case, both rows have the same ids a and b.
I am having trouble accessing rows by using document.getElementById since it could be multiple duplication. How do I specify a row using both the table ID and the row ID in JavaScript? Thanks.

You should never ever use the same ID twice! That said, you can use document.querySelectorAll() where you can use the same selectors as you use in CSS. Something like so to get all <tr>
var rowsOfTable1 = document.querySelectorAll('#T1 tr');
var rowsOfTable2 = document.querySelectorAll('#T2 tr');
rowsOfTable1.forEach( row => { console.log(row.innerHTML) });
rowsOfTable2.forEach( row => { console.log(row.innerHTML) });
<table id="T1">
<tr id="a">
<td>T1 a</td>
</tr>
<tr id="b">
<td>T1 b</td>
</tr>
</table>
<table id="T2">
<tr id="a">
<td>T2 A</td>
</tr>
<tr id="b">
<td>T2 B</td>
</tr>
</table>
or you can be more specific with the selector. If you know you only want to get 1 item you can also use Document.querySelector() which will not return an array but just the single item, something like:
var aOfTable1 = document.querySelector('#T1 #a');
var bOfTable2 = document.querySelector('#T2 #b');
console.log(aOfTable1.innerHTML);
console.log(bOfTable2.innerHTML);
<table id="T1">
<tr id="a">
<td>T1 a</td>
</tr>
<tr id="b">
<td>T1 b</td>
</tr>
</table>
<table id="T2">
<tr id="a">
<td>T2 A</td>
</tr>
<tr id="b">
<td>T2 B</td>
</tr>
</table>
or you could select all <tr> elements with an id like:
var rowsOfTable1 = document.querySelectorAll('#T1 tr[id]');

Related

How to make nested tree table using sortable js?

Info: I want to make nested draggable table using sortable js. This is like a tree table.
The .detail-view tr is a child of previous tr or which have Parent data. I want If user Drag the parent tr the child(.detail-view) also dragged along with it. each parent tr have there separate zone with there child table.
The childs are not shared able with other childs or parents.
https://jsfiddle.net/47r95hbs/
<table class="table" id="mytable">
<thead>
<tr>
<th>Sortable Table</th>
</tr>
</thead>
<tbody id="ptable">
<tr>
<td>Parent subject 1</td>
</tr>
<tr class="detail-view" data-subject="1">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 1 child</td>
</tr>
<tr data-id="2">
<td>Subject 1 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Parent subject 2</td>
</tr>
<tr class="detail-view" data-subject="2">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 2 child</td>
</tr>
<tr data-id="2">
<td>Subject 2 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Parent subject 3</td>
</tr>
<tr class="detail-view" data-subject="2">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 3 child</td>
</tr>
<tr data-id="2">
<td>Subject 3 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

How to add a new element with jQuery

I would like to add a new element with jQuery with DOM-manipulation but I'm a little bit confused with all the functions like eq, nth and so on.
Here is my base construct:
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
Here should be the DOM-Manipulation
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
Where the "Here should be the DOM-Manipulation" I would like to insert a new tablerow.
Use this:
$(".tableInput").eq(3).find('tr').append('<tr><td>Hello World..!</td></tr>');
.tableInput{border:1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
:eq() allows you to access the elements in the jQuery object by index
http://api.jquery.com/eq-selector/
:nth-child also allows you to access the an element by index, however it only applies to the term to the immediate left of it.
http://api.jquery.com/nth-child-selector/
You need to use .after
$(document).ready(function(){
$tr = '<tr><td>Hello</td></tr>';
$('#myTable tr:first').after($tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput" id="myTable">
<tr>
<td></td>
</tr>
</table>
You can add table row with following ways :
1. Via append :
a. Without declaring element before :
$("#tableInput").last().append('<tr><td></td></tr>');
b. With declaring element :
var tableRow = $('<tr><td></td></tr>');
$("#tableInput").last().append(tableRow);
Via after :
var tableRow = $('<tr><td></td></tr>');$("#tableInput").last().children().after(tableRow);
Just append a new table row to the last <table> element like this
$('table:last').prev().append('<tr><td>Here is your new table row</td></tr>')
table{
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td>A</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>B</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>C</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>D</td>
</tr>
<!--Here should be the DOM-Manipulation !-->
</table>
<table class="tableInput">
<tr>
<td>E</td>
</tr>
</table>
:eq() allows you to access the elements in the jQuery object by index
http://api.jquery.com/eq-selector/
:nth-child also allows you to access the an element by index, however it only applies to the term to the immediate left of it.
http://api.jquery.com/nth-child-selector/

How to get a first td values of every table using JQuery?

I want to select all first td values using JQuery.
Here is my code:
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
I want to get only 2 td (Status.Worksheet ID) elements from my above code using JQuery
You can pass any valid CSS selector to JQuery, so all you need is:
$("td:first-child");
// This will find and group together all the `<td>` elements that are the first ones
// within their parent (<tr>).
var $results = $("td:first-child");
// You can loop over the set and work with the individual DOM elements...
$results.each(function(index, result){
// result is the DOM element we're looping over
console.log(result.textContent);
});
// Or, you can access a specific element by index:
console.log($results[0].textContent + ", " + $results[1].textContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;"><table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>

How can I use ng-repeat in a table body to encompass multiple rows?

I'm trying to transition from jsRender to AngularJs and can't seem to figure out how to generate multiple table rows with ng-repeat.
I need to generate two table rows per ng-repeat, these rows are related to each other. The second row is actually a hidden row that expands out like an accordion. This works perfectly fine with renderJs:
With renderJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
{{for myArray}} <!-- Creates two rows per item in array -->
<tr>
<td>{{data}}</td>
<td>{{data2}}</td>
</tr>
<tr class="special-row">
<td>{{otherData}}</td>
<td>{{otherData2}}</td>
</tr>
{{/for}}
</tbody>
</table>
With AngularJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<div ng-repeat="element in myArray"> <!-- This gets removed since it's not a valid element for a table body -->
<tr>
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</div>
</tbody>
</table>
I cannot have a <div> inside of my table body to put the ng-repeat on. How can I do this?
You should do it like this
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="element in myArray">
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr ng-repeat-end class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</tbody>
https://jsfiddle.net/feq6pe7m/1/
<body ng-app="SampleApp">
<table ng-controller="fcController" border="1px">
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody ng-repeat="element in myArray">
<tr>
<td>{{element .Data1}}</td>
<td>{{element .Data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.OtherData1}}</td>
<td>{{element.OtherData2}}</td>
</tr>
</tbody>
</table>
</body>

angularjs table : tr with category using ng-repeat with list

Given the following model :
[{categoryName: "category1", items:[{name:"item1.1"}{name:"item1.2"},...]},
{categoryName: "category2", items:[{name:"item2.1"},...]},...]
I'd like to create this table :
<table>
<tr>
<th>category1</th>
</tr>
<tr>
<td>item1.1</td>
</tr>
<tr>
<td>item1.2</td>
</tr>
...
<tr>
<th>category2</th>
</tr>
<tr>
<td>item2.1</td>
</tr>
...
</table>
How would you do it using angularjs instructions ?
Nested repeats and the new ng-repeat-start/ng-repeat-end and remembering that it is OK for a <table> to have many bodies and heads:
<table>
<thead ng-repeat-start="x in data">
<tr><th>{{x.categoryName}}</th></tr>
</thead>
<tbody ng-repeat-end>
<tr ng-repeat="y in x.items">
<td>{{y.name}}</td>
</tr>
</tbody>
</table>
Relevant fiddle: http://jsfiddle.net/kGZt8/
Documentation: ngRepeat

Categories