i need help guys i want to know how to transfer a table row value into another table row using onclick already know how to get the value using the onclick but dont know how to transfer the values into the table
<html>
<body>
<table class='list'>
<thead>
<tr>
<th class='idno'>ID No.</th>
<th class='itemn'>Item</th>
<th class='quant'>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Chocolate</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>Bread</td>
<td>99</td>
</tr>
</tbody>
</table>
<script>
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
alert(data);
};
</script>
</body>
</html>
You need to create some nodes. Create a <tr> first. Then loop the following: create a <td>, then a text node from the data that you have already collected, append the text into the <td> then the <td> into the <tr> and repeat the loop. Finally append the <tr> to the table body. Run the code snippet below.
<html>
<body>
<table class='list'>
<thead>
<tr>
<th class='idno'>ID No.</th>
<th class='itemn'>Item</th>
<th class='quant'>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Chocolate</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>Bread</td>
<td>99</td>
</tr>
</tbody>
</table>
<br><br>
MY NEW TABLE
<table class='list'>
<thead>
<tr>
<th class='idno'>ID No.</th>
<th class='itemn'>Item</th>
<th class='quant'>Quantity</th>
</tr>
</thead>
<tbody id='myNewTableBody'></tbody>
</table>
<script>
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
var trnode = document.createElement("tr");
for(var i = 0; i < data.length; i++){
var tdnode = document.createElement("td");
var textnode = document.createTextNode(data[i]);
tdnode.appendChild(textnode);
trnode.appendChild(tdnode);
}
document.getElementById("myNewTableBody").appendChild(trnode);
alert(data);
};
</script>
</body>
</html>
I have modified your code, look into this
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
// get other table you want to insert in
var t2 =document.getElementById("othertable");
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
//insert at zero index
var tr = t2.insertRow(0)
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
var cell = tr.insertCell(i);
cell.innerHTML = cells[i].innerHTML;
}
}
alert(data);
};
<table class='list'>
<thead>
<tr>
<th class='idno'>ID No.</th>
<th class='itemn'>Item</th>
<th class='quant'>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Chocolate</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>Bread</td>
<td>99</td>
</tr>
</tbody>
</table>
<hr/>
<table id="othertable"></table>
Related
I am trying to sort the table using javascript to order by total points at the end. The table is a dynamic one so W1, W2, W3 columns adds up to total. Is there way to order rows them by total in javascript. Each row is dynamically created as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="fl-table">
<thead>
<tr>
<th>Player</th>
<th>Player Name</th>
<!-- <th>W1</th>
<th>W2</th> -->
<th>W1</th>
<th>W2</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="agl-profile-img-new"><img src="https://via.placeholder.com/70
C/O https://placeholder.com/"></td>
<td>Heather Rankin</td>
<td>4</td>
<td>21</td>
<td>25</td>
</tr>
<tr>
<td class="agl-profile-img-new"><img src="https://via.placeholder.com/70
C/O https://placeholder.com/"></td>
<td>Stephen Puopolo</td>
<td>3</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td class="agl-profile-img-new"><img src="https://via.placeholder.com/70
C/O https://placeholder.com/"></td>
<td>Latheesh V M V</td>
<td>2</td>
<td>26</td>
<td>28</td>
</tr>
</tbody>
<tbody>
</tbody>
</table>
Is there is any way? Please help
can you gather the cells into object and sort them like this. https://jsfiddle.net/e4oscnz8/4/
const sortTotal = () => {
const tbl = [...document.getElementsByClassName("fl-table")][0];
const tbody = [...tbl.tBodies][0];
const oObjects = [];
[...tbody.rows].forEach(row => {
const cells = [...row.cells];
const obj = [...row.cells].map(cell => {
return cell.innerHTML;
});
oObjects.push(obj);
});
oObjects.sort((a, b) => a[a.length -2] > b[b.length -2] ? 1 : -1);
[...tbody.rows].forEach((row, i) => {
[...row.cells].forEach((cell, j) => {
cell.innerHTML = oObjects[i][j];
});
});
}
push tr rows into array or object and sort by your custom sort function: https://jsfiddle.net/2dq7m8k9/
you are using jquery so life is good :)
function SortByTotal(tr1, tr2){//descending sorting
var total1 = parseInt(tr1.find('td:last-child').text());
var total2 = parseInt(tr2.find('td:last-child').text());
return ((total1 > total2) ? -1 : ((total1 < total2) ? 1 : 0));
}
var trs=new Array();
$('#mytable tbody').first().children('tr').each(function(){
trs.push($(this).clone());
});
trs.sort(SortByTotal);
$('#mytable tbody').first().empty();
var i=0;
for (i = 0; i < trs.length; i++) {
$('#mytable tbody').first().append(trs[i]);
}
I was trying to make a search function using pure javascript . I have a small code snippet to work on . But this does not work if we have inner tables in multiple tr. How we can achieve this ?
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" size = "4" id="myInput" onkeyup="myFunction()">
<table id="myTable">
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
Why this script function is not working if my HTML is like below
<table id="myTable">
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>USA</td>
</tr>
<tr>
<td>UK</td>
</tr>
</table>
</td>
</tr>
</table>
You can check the contents of each td to see if it contains a table and then recursively check that table to see if its contents should be shown or not. I've done it here with some of your code, but I'd break the functions up even further.
This code returns a boolean representation of whether the inner table is completely hidden or not to use as part of the logic to hide the rows that contain inner tables. If the inner tables are hidden but another element in the row is not, the inner table rows are shown again.
function myFunction() {
const input = document.getElementById("myInput"),
filter = input.value.toUpperCase(),
table = document.getElementById("myTable");
filterTableRows(table, filter)
}
function filterTableRows(table, filter) {
const rows = table.getElementsByTagName('tr');
let hiddenRows = 0;
for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
let show = false;
const columns = rows[rowIndex].getElementsByTagName('td');
for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
const innerTables = columns[columnIndex].getElementsByTagName('table');
if (innerTables.length) {
for (let tableIndex = 0; tableIndex < innerTables.length; tableIndex++) {
if ( ! filterTableRows(innerTables[tableIndex], filter)) {
show = true;
}
}
} else {
let txtValue = columns[columnIndex].textContent || columns[columnIndex].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
show = true;
}
}
}
if (show) {
rows[rowIndex].style.display = "";
for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
const innerTables = columns[columnIndex].getElementsByTagName('table');
if (innerTables.length) {
for (let tableIndex = 0; tableIndex < innerTables.length; tableIndex++) {
showTable(innerTables[tableIndex]);
}
}
}
} else {
rows[rowIndex].style.display = "none";
hiddenRows++;
}
}
return hiddenRows == rows.length;
}
function showTable(table) {
const rows = table.getElementsByTagName('tr');
for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
rows[rowIndex].style.display = "";
}
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" size="4" id="myInput" onkeyup="myFunction()">
<table id="myTable">
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Pierre Truffant</td>
</tr>
</table>
</td>
<td>France</td>
</tr>
</table>
</body>
</html>
I have the following fiddle - where I am testing out a concept of getting to the data in a table. At the moment, I can get to the value displayed in a particular cell, when i click on the cell.
In addition, I would like to be able to get the row and column index of the clicked cell. Does anyone here know how to do this?
Link to fiddle
var tbl = document.getElementById("recordingTable");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () { getval(this); };
}
}
function getval(cel) {
alert(cel.innerHTML);
}
<table cellspacing="1" id="recordingTable">
<!-- this is the head element -->
<thead class="callView">
<!--specify the columns -->
<tr>
<th>STATE</th>
<th>CALLID</th>
<th>COLLECTED</th>
<th>ZONE</th>
</tr>
</thead>
<!-- -->
<tbody class="callView">
<tr>
<td>0</td>
<td>10001</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<td>1</td>
<td>10002</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>0</td>
<td>10003</td>
<td>spring</td>
<td>1</td>
</tr>
</tbody>
</table>
Insead of adding onclick event to each cell you can add it to table, and get neccesary info from argument:
var tbl = document.getElementById("recordingTable");
tbl.onclick = function(e)
{
console.log(e.target.innerHTML);
console.log(e.target.cellIndex);
console.log(e.target.parentElement.rowIndex);
}
JsFiddle: https://jsfiddle.net/19qfsxr9/14/
You can get by using
cel.rowIndex
cel.cellIndex
in the function
it was working on when i split them into two but when i combine them the save button isnt working i tried changing the document.getElementById to document.getElementByClassName but it stops the function of both here is the code
<html>
<head>
<body>
<div class="container">
<table class="table table-hover table-bordered" id = "table1">
<thead>
<tr>
<th><center>Item Name</center> </th>
<th><center>Brand</center> </th>
<th><center>Selling Price</center> </th>
<th><center>Quantity</center> </th>
</tr>
</thead>
<tbody id = tbody1>
<tr>
<td>Cake</td>
<td>Pastry</td>
<td>100</td>
<td>5</td>
</tr>
<tr>
<td>Wat</td>
<td>But</td>
<td>100</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<table class="table table-hover table-bordered" id = "table2">
<thead>
<tr>
<th><center>Item Name</center> </th>
<th><center>Brand</center> </th>
<th><center>Selling Price</center> </th>
<th><center>Quantity</center> </th>
</tr>
</thead>
<tbody id = "myNewTableBody" class = "tbody2">
<tr class = "tr2">
</tr>
</tbody>
</table>
</div>
<input type = "submit" value = "save" name = "btnsave" onclick = "myFunction()" style = "position : absolute; top : 550px; left : 20px; font-size: 20px;"/></input>
</body>
<script>
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
var trnode = document.createElement("tr");
for(var i = 0; i < data.length; i++){
var tdnode = document.createElement("td");
var textnode = document.createTextNode(data[i]);
tdnode.appendChild(textnode);
trnode.appendChild(tdnode);
}
document.getElementById("myNewTableBody").appendChild(trnode);
};
function myFunction() {
var rows = document.getElementById("table2")
.getElementsByClassName("tbody2")
[0].getElementsByClassName("tr2").length;
var a = 1;
var b = 1;
for(var i = 0; i < rows; i++){
var x =
document.getElementById("table2").rows[a].cells.item(0).innerHTML
var y =
document.getElementById("table2").rows[a].cells.item(4).innerHTML
var a = a + 1;
var b = b + 1;
alert(x);
alert(y);
}
}
</script>
<html>
<head>
heres the seperate code of the save button that's working
<html>
<head>
<body>
<div class="container">
<table id = "table1">
<thead>
<tr>
<th><center>ID</center> </th>
<th><center>Item Name</center> </th>
<th><center>Category</center> </th>
<th><center>Selling Price</center> </th>
<th><center>Quantity</center> </th>
</tr>
</thead>
<tbody class = "tbody2">
<tr class = "tr2">
<td>1</td>
<td>Cake</td>
<td>Pastry</td>
<td>100</td>
<td>5</td>
</tr>
<tr class = "tr2">
<td>2</td>
<td>Bread</td>
<td>Pastry</td>
<td>5</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<input type = "submit" value = "save" name = "btnsave"
onclick = "myFunction()" /></input>
</body>
<script>
function myFunction() {
var rows = document.getElementById("table1")
.getElementsByClassName("tbody2")[0]
.getElementsByClassName("tr2").length;
var a = 1;
var b = 1;
for(var i = 0; i < rows; i++){
var x = document.getElementById("table1").rows[a].cells.item(0).innerHTML
var y = document.getElementById("table1").rows[a].cells.item(4).innerHTML
var a = a + 1;
var b = b + 1;
alert(x);
alert(y);
}
}
</script>
</html>
In this code, second table, table with id table2 is empty. When you take, first column, in it's second row(table body), you get a null. Then you trying to access innerHTML property on a null element. Add some content to table2 and run check it again.
Again same problem comes when you say, document.getElementById("table2").rows[a].cells.item(4).innerHTML. Here you are trying to access 5th cell of a row, which contains only 4 cells.
Here is a table example:
<table id="tableId">
<thead>
<tr>
<th>line number</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>value 1</td>
</tr>
<tr>
<td>3</td>
<td>value 2</td>
</tr>
<tr>
<td>1</td>
<td>value 3</td>
</tr>
</tbody>
</table>
<input type="button" value="relineing" onclick="reLineNumbering('tableId')"/>
I want only the "line number"s to be in sequence like this:
<table id="tableId">
<thead>
<tr>
<th>line number</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>value 1</td>
</tr>
<tr>
<td>2</td>
<td>value 2</td>
</tr>
<tr>
<td>3</td>
<td>value 3</td>
</tr>
</tbody>
</table>
<input type="button" value="relineing" onclick="reLineNumbering('tableId')"/>
I've tried both of the snippets below:
function reLineNumbering(tableId) {
$('#'+tableId+' tbody').each(function (i) {
this.rows[i].cells[0].text('i');
});
}
function reLineNumbering(tableId) {
var rowCount = $('#'+tableId+' tbody tr').length;
for (var i=0; i<rowCount; i++) {
$('#'+tableId+' tbody').rows[i].cells[0].text(i);
}
}
Could someone help me?
This will change the first column to a sequential number starting from 1:
function reLineNumbering(tableId){
$('#' + tableId + ' > tbody > tr').each(function(i, val){
$('td:first', this).text(i+1);
});
}
Fiddle
Plain Javascript - Fiddle:
function reLineNumbering(tableId){
var table = document.getElementById(tableId);
var total = table.rows.length;
for(var i=0; i<total; i++){
if(i > 0){
table.rows[i].cells[0].innerHTML = i;
}
}
}
Or by creating the text node instead of setting innerHTML. In this simple scenario the use of innerHTML isn't a problem, but usually you will want to work with DOM elements and set the text node instead of setting the HTML:
function reLineNumbering(tableId){
var table = document.getElementById(tableId);
var total = table.rows.length, text, cell;
for(var i=0; i<total; i++){
if(i > 0){
text = document.createTextNode(i);
cell = table.rows[i].cells[0];
cell.removeChild(cell.firstChild);
cell.appendChild(text);
}
}
}
Try
$('#tableId > tbody > tr').find('td:first').text(function(idx, text){
return idx + 1
})
Demo: Fiddle
this is the correct answer:
function reLineNumbering(tableId) {
var myTable=document.getElementById(tableId);
var rowCount = myTable.rows.length;
for (var i = 1; i < rowCount; i++) {
myTable.rows[i].cells[0].innerHTML = i;
}
}
For a VanillaJS version of the same thing:
(function(t)
{
for(var i=1;i<t.rows.length;i++)
{
t.rows[i].cells[0].innerHTML += ' Vanilla';
}
}(document.getElementById('tableId')));
Which I added to the fiddle of Arun
I post it here, because it's not an awful lot longer than the jQ version of the same code, but it is faster.
You can change it to:
var t = document.getElemebtById('tableId');
for(var i=1;i<t.rows.length;i++)
{
t.rows[i].cells[0].innerHTML = 1 + i;//number tbl
}
If you don't feel comfortable using the IIFE.
PS: the loop could be simplified to:
for(var i=1;i<t.rows.length;)//do nothing here
{
t.rows[i].cells[0].innerHTML = i++;//increment i here
}