I am intending to copy specific cells of a table to another page, I did tried out on copying. However, I could only copy the whole table and not specific cells. I have the example code below.
For example, I have
Product ID | Product Name | Qty | Price
-----------------------------------------------------
1 | Adidas | 1 | $50 | Delete Btn
I want this content to be copied onto my checkoutList, but excluding the Delete btn, which is the last cell. May I know how to do it?
<table id="myList">
<thead>
<tr>
<td>Product Name</td>
<td>Qty</td>
<td>Price</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
This the table that will be populated with the copied content
<table id="checkoutList">
</table>
This is my copy table function.
function copyTable() {
window.location.href = "#/app/checkOut";
//copyTable
var source = document.getElementById('myList');
var destination = document.getElementById('checkoutList');
var copy = source.cloneNode(true);
copy.setAttribute('id', 'checkoutList');
destination.parentNode.replaceChild(copy, destination);
}
You're looking for .children property.
Related
Need help with populating a text area based on html table row selection.
In the table below, I want to extract the content of the column 'Comments' for the selected row and write into the text area 'Comment' on the same page. I have only managed to create the table but nothing else.
Below is the code I have now created from this link. What is happening now is that only the currently selected cell gets put in the text box instead of just the 'Comment' column. I want to input only in the 'Comment' column into the box regardless of the cell clicked upon in the row.
<table id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Comments</th>
</tr>
<tbody>
<tr>
<td>John</td>
<td>42</td>
<td>avery long comment</td>
</tr>
<tr>
<td>Peter</td>
<td>35</td>
<td>another very long comment</td>
</tr>
<tr>
<td>Mary</td>
<td>54</td>
<td>some comment</td>
</tr>
</tbody>
</table>
<script>
var table = document.getElementById('table');
var selected = table.getElementsByClassName('selected');
table.onclick = highlight;
function highlight(e) {
if (selected[0]) selected[0].className = '';
e.target.parentNode.className = 'selected';
var element = document.querySelectorAll('.selected');
if (element[0] !== undefined) { //it must be selected
document.getElementById("myTextbox").value = element[0].children[0].firstChild.data
}
}
</script>
<div >
<textarea class="form-control" id="myTextbox"></textarea>
</div>
Thanks for your help.
You're getting the first column but you can get the third column with the comment by changing the index of the child to 2 instead of 0.
document.getElementById("myTextbox").value = element[0].children[2].firstChild.data
I have a table which has several columns holding text values and one column that’s a checkbox element. On a button click event, I’m trying to capture the text data for all elements across checked rows, but I’m having trouble accessing the text data of elements of the checked rows.
I’m able to get the checked rows of the original table by doing the following:
var table =$(‘#TableID tr’).filter(‘:has(:checkbox:checked)’).find(‘td’);
This works, and, logging the resultant jquery object in the console, Im able to see the tds of interest.
However, I’ve not been able to retrieve and store the text values of each td of the “table” jquery object. Here’s what I have so far:
table.find(“tbody tr”).each(function() { var $tds=$(this).find(‘td’),comp_name=$tds.eq(0).text(),pos=$tds.eq(1).text(),address=$tds.eq(2).text();});
etc, basically storing explicitly all attributes of a row, and this is done on the checked rows. But this returns nothing. No error, no values. I’ve also tried other approaches but nothing seems to work.
How can I capture this text row data for checked rows?
Sample row:
Company | Position | Years | Applicable?
Google | janitor | 3 | (checked)
Nokia | swe | 1 | (unchecked)
In the above we’d want the text values for each of the attributes of just the first row
The trick here is in the element to target and how to iterate them.
You were in fact quite close but your function wasn't returning anything.
$('button').click(function() {
var $trs = $('tr:has(:checkbox:checked)', 'table');
var res = [];
$trs.each(function() {
$td = $(this).children('td');
// This is the missing part
res.push({
comp: $td.eq(0).text(),
pos: $td.eq(1).text(),
add: $td.eq(2).text(),
})
})
console.log(res);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="company">Company 1</td>
<td class="position">Position 1</td>
<td class="address">Address 1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td class="company">Company 2</td>
<td class="position">Position 2</td>
<td class="address">Address 2</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td class="company">Company 3</td>
<td class="position">Position 3</td>
<td class="address">Address 3</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<button>
Go to work
</button>
I have a table sorted by properties "age" and "name" but I have a counter of rows (counterR) that shows the numbers of rows in the table.
I want to exclude this item on OrderBy because is ordered too, I need it would be static and always ordered but I can´t.
There's the Plunker link of my problem: http://plnkr.co/edit/MJYayUANphxksbGkyEcj?p=preview
HTML:
<body ng-controller="MainCtrl">
<table border="0">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th ng-click="sortType = 'name';sortReverse=!sortReverse">NAME</th>
<th ng-click="sortType = 'age';sortReverse=!sortReverse">AGE</th>
</tr>
</thead>
<tbody>
<tr ng-init="counterR=incrementCounter()" ng-repeat="item in items | orderBy:sortType:sortReverse">
<td>{{counterR}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
JS:
$scope.items = [
{"name":"Jhon","id":"BB1","age":23},
{"name":"Austin","id":"BB2","age":44},
{"name":"Mark","id":"BB3","age":56},
{"name":"Jenn","id":"BB4","age":15}
];
var counterRow = 0;
$scope.incrementCounter = function(){
counterRow = counterRow + 1;
return counterRow;
}
Instead of storing the row number with the data - which doesn't work because the row numbers are not specific to a data row, but rather to a display position - you need to calculate the value "on the fly". In the scope of an ng-repeat you can do this with the special $index variable. That is, instead of
<td>{{counterR}}</td>
which reads a value from the data row, you would use
<td>{{$index+1}}</td>
(assuming sequential numbers starting from 1)
I am trying to insert rows within a cell in HTML Table using jquery, I want something like this:
--------------
ID | Sec | Div
--------------
1 | S1 | D1
| S2 | D2
| S3 | D3
--------------
2 | S3 | D3
| S4 | D4
| S5 | D5
--------------
Here is what I have so far:
function insertRows(this){
var Rows1 = '<tr><td> S1 </td></tr><tr><td> S2 </td></tr><tr><td> S3 </td></tr>'
var Rows2 = '<tr><td> S3 </td></tr><tr><td> S4 </td></tr><tr><td> S5 </td></tr>'
this.srcElement.parentElement.nextSibling.outerHTML = Rows1
this.srcElement.parentElement.nextSibling.nextSibling.outerHTML = Rows2
}
What is does is, it inserts all in the same Row, something like this:
---------------------
ID | Sec | Div
---------------------
1 | S1S2S3 | D1D2D3
---------------------
2 | S3S4S5 | D3D4D5
---------------------
How can I make this to work?
You Can Fullfill your requirement without using jquery
just Paste this Code inside body tag
<table>
<tr>
<td >ID</td>
<td>SEC</td>
<td>DIV</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>S1</td>
<td>D1</td>
</tr>
<tr>
<td>S2</td>
<td>D2</td>
</tr>
<tr>
<td>S3</td>
<td>D3</td>
</tr>
<tr><td colspan="3">---------------------</td></tr>
<tr>
<td>ID</td>
<td>SEC</td>
<td>DIV</td>
</tr>
<tr>
<td rowspan="3">2</td>
<td>S1</td>
<td>D1</td>
</tr>
<tr>
<td>S2</td>
<td>D2</td>
</tr>
<tr>
<td>S3</td>
<td>D3</td>
</tr>
</table>
here you can find live example http://jsfiddle.net/Anujyadav123/AdQy3/
.innerHTML is rather broken when dealing with tables, at least under IE.
Your choices are:
Restrict the use of .innerHTML to only change the contents of a td element.
Use .innerHTML to replace the ENTIRE table structure
Use DOM methods to manipulate table rows and table cells.
https://developer.mozilla.org/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
take a look here Add colspan and rowspan on table on the fly
OR
is it important to add row, if not you are able to add your values into cell
Example:
function showP(){
txt1 = $($('#myTable').find('TR').find('TD')[1]).html()+'</br>S1'
txt3 = $($('#myTable').find('TR').find('TD')[3]).html()+'</br>D1'
$($('#myTable').find('TR').find('TD')[1]).html(txt1 )
$($('#myTable').find('TR').find('TD')[3]).html(txt3 )
}
I have a table for which I want to display only the first row by default, but display additional X number of rows if a user clicks a "show more" link (and inversely hide the X rows if the user then clicks "show less").
To exemplify, I want the default view when the page loads to be like so:
Top Scores
====================================
| 1 | show this row always! |
====================================
-show more-
Then, if a user clicks "show more", the table should expand with additional rows and look like this:
Top Scores
====================================
| 1 | show this row always! |
| 2 | newly displayed row |
| 3 | newly displayed row |
| 4 | newly displayed row |
| 5 | newly displayed row |
====================================
-show less-
Then obviously if a user clicks "show less" the table returns to default (showing only the first row again).
I'm familiar with the .toggle() function in jQuery, but not sure if it can be applied here or if I have to do more manual work.
Thanks!
No additional classes, no headers required - http://jsfiddle.net/wgSZs/
$('table').find('tr:gt(0)').hide();
$("button").on("click", function() {
$('table').find('tr:gt(0)').toggle();
});
UPDATE
It might be better to hide the additional rows via CSS instead of jQuery to avoid element shifting while the JS is being downloaded and applied. But still no need to add classes - it's a good idea to keep your markup as clean as possible. You can do this:
table tr { display: none }
table tr:first-child { display: block }
Here is the working example - http://jsfiddle.net/wgSZs/1/
if you mark the added rows with a class like .collapsible, then you can easily toggle their visibility in javascript.
$('.collapsible').show() or $('.collapsible').hide() or $('.collapsible').toggle()
http://jsfiddle.net/iambriansreed/uwfk8/
var initial_rows_to_show = 2;
(function(_rows){
_rows.hide();
$('a.more').toggle(function(){
_rows.show(); $(this).text('less');
},function(){
_rows.hide(); $(this).text('more');
});
})($('tr:gt(' + (initial_rows_to_show - 1) + ')'));
You can do this by hiding of a table & displaying only
$('thead').click(function(){
$('tbody').show();
})
OK, so after typing the whole question out, StackOverflow decided to show me a relevant related question. :)
It looks like I can use the gt selector via jQuery to toggle only rows greater than a specified row number, which should be perfect for what I want to achieve.
Sorry for the redundant question (assuming this will work for me, have not yet tried it)!
Toggle would work perfectly:
$('#show-link').toggle(function(){
}
,
function(){
});
Here you go...working example at jsFiddle:
http://jsfiddle.net/ndFgF/8/
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<th width="25%" id="expand" scope="col">Show More</th>
<th width="25%" scope="col"> </th>
<th width="25%" scope="col"> </th>
<th width="25%" id="collapse" scope="col">Show Less</th>
</tr>
<tr data-rows="togglerow" style="display:none">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr data-rows="togglerow" style="display:none">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr data-rows="togglerow" style="display:none">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr data-rows="togglerow" style="display:none">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Note that the data attribute in the table rows are referenced in the jQuery below:
<script>
$("#collapse").click(function() {
$("[data-rows='togglerow']").hide(400);
})
$("#expand").click(function() {
$("[data-rows='togglerow']").show(400);
})
</script>
I used the 'data' attribute instead of class name because I like to keep those separate...you can use a class name if you'd like, but don't use ID because it's not a proper way to do it (IDs are supposed to be unique, not repeated).