I have an array and I just want to use it in my table.
This is my idea but i don't know how to use the array to be shown inside a td-tag:
<head>
<script type="text/javascript">
function list() {
var list = ['Tim','Tom','Tam']
}
</script>
</head>
<body>
<table>
<tr>
<td>Place 1: list[0]</td>
<td>Place 2: list[1]</td>
<td>Place 3: lsit[2]</td>
</tr>
</table>
</body>
The hole idea is to generate an array from a Python Script, which gets it from a xlsx file, and give it over to a HTML page.
Create an array, and for each element create an TD element.
var list = [0, 1, 2, 3, 4, 5],
pushTo = arr => {
arr.forEach((cur , i) => {
let tempElem = document.createElement("TD");
tempElem.innerHTML = `list[${i}]`;
tlist.appendChild(tempElem);
});
};
pushTo(list);
<table>
<tr id="tlist">
</tr>
</table>
Pure JS:
<html>
<head>
<script type="text/javascript">
var list = ['Tim', 'Tom', 'Tam'];
</script>
</head>
<body>
<table>
<tbody>
<tr>
</tr>
</tbody>
</table>
<script>
var tr = document.querySelectorAll('table > tbody > tr')[0];
for (var l in list) {
var index = parseInt(l) + 1;
var td = document.createElement('td');
td.innerHTML = 'Place ' + index + ': ' + list[l];
tr.appendChild(td);
}
</script>
</body>
</html>
AngularJS:
var angularApp = angular.module('angularApp', []);
angularApp.controller('angularCtrl', function ($scope) {
$scope.list = ['Tim', 'Tom', 'Tam'];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularApp" ng-controller="angularCtrl">
<table>
<tbody>
<tr>
<td ng-repeat="l in list">Pace {{$index + 1}}: {{l}}</td>
</tr>
</tbody>
</table>
</div>
Related
How do I do that JavaScript will print in my HTML page a table via the value the user will choose?
That the JS script:
let numCol = document.getElementById('txtColumns').value;
let numRow = document.getElementById('txtRows').value;
let go = document.getElementById('btn');
let table = document.getElementById('table');
let td = "<td></td>" * numCol;
let tr = ("<tr>" + td + "</tr>") * numRow;
go.addEventListener('click', function(){
table.innerHTML = tr;
})
That the HTML code:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<table class="workTable">
<tr>
<td>
<input type="number" placeholder="Columns Number" id="txtColumns">
</td>
<td>
<input type="number" placeholder="Rows Number" id="txtRows">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="btn">
Print
</button>
</td>
</tr>
<div>
<table id="table">
<!--Here I want to print the table-->
</table>
</div>
</table>
<script src="script.js"></script>
</body>
</html>
At first I thought about that way with the script but its only appear as a NaN and not table...
The following syntax:
let td = "<td></td>" * numCol;
does not produce numCol cells, so the following syntax:
let tr = ("<tr>" + td + "</tr>") * numRow;
does not produce numRow rows also.
So, the whole source code should be:
let go = document.getElementById('btn');
let table = document.getElementById('table');
go.addEventListener('click', () => {
let numCol = document.getElementById('txtColumns').value; //Get the value of txtColumns at the button click moment.
let numRow = document.getElementById('txtRows').value;
let td = "",
tr = "";
for (let i = 0; i < numCol; i++) {
td = td + "<td></td>";
}
for (let i = 0; i < numRow; i++) {
tr = tr + "<tr>" + td + "</tr>";
}
table.innerHTML = tr;
})
<table class="workTable">
<tr>
<td>
<input type="number" placeholder="Columns Number" id="txtColumns">
</td>
<td>
<input type="number" placeholder="Rows Number" id="txtRows">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="btn">
Print
</button>
</td>
</tr>
<div>
<table id="table" border="1">
<!--Here I want to print the table-->
</table>
</div>
</table>
Now I have NT$ symbol in price, so i want to remove it so i can bring the only price(number) into script to future calculate.
what should I change?
var test = document.querySelector(".origprice");
var price = parseInt(fparent.textContent.replace(/NT/,/\U+00024/,/,/,''));
var testt = price - 150;
document.getElementById("demo").innerHTML = testt;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="test">
<table id="table">
<tr>
<td class="origprice">NT$ 1,500</td>
</tr>
</table>
<p id="demo"></p>
</div>
you can use this function to get the desired result.
var txt="NT$ 1,500";
let t= ""
var numb = txt.match(/\d/g).map(i => {
t += i ;
})
console.log(+t);
If you will have space between prices and $, then you can do like the below,
$(document).ready(function(){
let total = 0;
$('.origprice').each(function() {
total += Number($(this).text().split(' ')[1]);
});
console.log(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="origprice">NS$ 10000</td>
<td class="origprice">NS$ 20000</td>
<td class="origprice">NS$ 30000</td>
</tr>
</table>
I have designed a table with headers. I am appending dynamic rows <tr> to this table. While appending I am losing the order of the rows. Any suggestion or ideas as to how can I solve this problem? Thanks in advance.
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
-- dynamic rows will come.
</table>
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable').append(html1);
$('#myTable').append(html2);
$('#myTable').append(html3);
Desired Output :
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tr id="1">
<td>aaa</td>
<td>aaa</td>
</tr>
<tr id="2">
<td>ccc</td>
<td>ccc</td>
</tr>
<tr id="3">
<td>bbb</td>
<td>bbb</td>
</tr>
</table>
This you will do. Add a sorting function and then call that function as described in below link.
Added snippet based on Jquery content sorting link:- https://www.shift8web.ca/2017/01/use-jquery-sort-reorganize-content/
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable').append(html1);
$('#myTable').append(html2);
$('#myTable').append(html3);
var i;
var htmlcontent = $('#myTable').html();
$('#myTableOriginalContent ').html( $('#myTable').html())
sortMeBy('id', 'myTable', 'tr', 'asc')
function sortMeBy(arg, sel, elem, order) {
var $selector = $('#'+sel),
$element = $selector.children(elem);
$element.sort(function(a, b) {
var an = parseInt(a.getAttribute(arg)),
bn = parseInt(b.getAttribute(arg));
if (order == "asc") {
if (an > bn)
return 1;
if (an < bn)
return -1;
} else if (order == "desc") {
if (an < bn)
return 1;
if (an > bn)
return -1;
}
return 0;
});
$element.detach().appendTo($selector);
}
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Original Content
<table id="myTableOriginalContent">
<thead>
<tr><td></td></tr>
<tr>
<th><span>Name</span></th>
<th><span>Description</span></th>
</tr>
</thead>
</table>
Desired Result
<table id="myTable">
<thead>
<tr><td></td></tr>
<tr>
<th><span>Name</span></th>
<th><span>Description</span></th>
</tr>
</thead>
</table>
</body>
</html>
Change $('#myTable').append(html3); to $(html3).insertAfter('#1'). Also note that you'll need a tbody element after the thead to contain your rows, but I would imagine the browser will be inserting one for you automatically. Try this:
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>';
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>';
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>';
$('#myTable tbody').append(html1).append(html2);
$(html3).insertAfter('#1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<td></td>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody></tbody>
</table>
The logic is you append all dynamic table rows then reorder them based on the attribute of the id.
Sorting code source: Using jquery, how do you reorder rows in a table based on a TR attribute?
I just modified it a little.
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
var html4 = '<tr id="5"><td>5th</td><td>5th</td></tr>'; // This should go to 5th position.
var html5 = '<tr id="4"><td>4th</td><td>4th</td></tr>'; // This should go to 4th position.
$('#myTable tbody').append(html1);
$('#myTable tbody').append(html2);
$('#myTable tbody').append(html3);
$('#myTable tbody').append(html4);
$('#myTable tbody').append(html5);
var $table=$('#myTable');
var rows = $table.find('tr').get();
rows.sort(function(a, b) {
var keyA = $(a).attr('id');
var keyB = $(b).attr('id');
if (keyA > keyB) return 1;
if (keyA < keyB) return -1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Simple just you are calling wrong way call this way
$('#myTable').append(html1);
$('#myTable').append(html3);
$('#myTable').append(html2);
Complete Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
</table>
</body>
</html>
<script type="text/javascript">
$( document ).ready(function() {
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>';
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>';
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>';
$('#myTable thead').after(html1,html3,html2);
});
</script>
Try Following
Add <tbody> in table & append rows
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable tbody').append(html1);
$('#myTable tbody').append(html2);
$('#myTable tbody').append(html3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I m trying to get the value of a row id inside a modal called with Ajax.
I would like to get the row id (data-id) from the modal.
the JavaScript function "onRowClick" is working for the table in the main page but not for the one in the modal.
http://plnkr.co/edit/ehkd8L22KZb0xxCnubUb?p=preview
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modalit#0.1.6/dist/MODALit.css">
<script src="https://cdn.jsdelivr.net/npm/modalit#0.1.6/dist/MODALit.min.js"></script>
</head>
<body>
<table id="table1">
<tr data-id="1"><td>Row 1</td></tr>
<tr data-id="2"><td>Row 2</td></tr>
<tr data-id="3"><td>Row 3</td></tr>
</table>
<hr />
<div style="color:green" id="row-value">-</div>
<hr />
<!-- Sets modal target -->
<button type="button" id="button" data-src="modal.html">Modal Open</button>
<script>
var modal = new MODALit({
el: '#button',
});
window.onload = onRowClick("table1", function (row) {
var rowid = row.getAttribute("data-id")
//alert(rowid);
document.getElementById("row-value").innerHTML = rowid;
})
function onRowClick(tableId, callback) {
var table = document.getElementById("table1"),
rows = table.getElementsByTagName("tr"),
i;
for (i = 0; i < rows.length; i++) {
table.rows[i].onclick = function (row) {
return function () {
callback(row);
};
}(table.rows[i]);
}
};
</script>
</body>
</html>
Ajax content (modal.html):
<table id="table2">
<tr data-id="1"><td>Row 1</td></tr>
<tr data-id="2"><td>Row 2</td></tr>
<tr data-id="3"><td>Row 3</td></tr>
</table>
<script>
window.onload = onRowClick("table2", function (row) {
var rowid = row.getAttribute("data-id")
//alert(rowid);
document.getElementById("row-value").innerHTML = rowid;
})
function onRowClick(tableId, callback) {
var table = document.getElementById("table2"),
rows = table.getElementsByTagName("tr"),
i;
for (i = 0; i < rows.length; i++) {
table.rows[i].onclick = function (row) {
return function () {
callback(row);
};
}(table.rows[i]);
}
};
http://plnkr.co/edit/ehkd8L22KZb0xxCnubUb?p=preview
How can i get the data-id of the row inside the modal ?
$(document.ready(function() {
var laterbox = document.getElementById('laterbox');
var tabl = document.createElement('table');
var trh = document.createElement('tr');
var trd = document.createElement('tr');
var txt = document.createTextNode('book_id');
var tr1 = document.createElement('th');
tr1.appendChild(txt);
trh.appendChild(tr1);
tabl.appendChild(trh);
tabl.appendChild(trd);
laterbox.appendChild(tabl);
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
<table>
<tr>
<th>aa</th>
<th>bb</th>
</tr>
<tr>
</tr>
</table>
</div>
But the second table does't display, I don't know why. I tried many times but could not find the error. You can see the output here: https://codepen.io/sandesh_bafna8/pen/BwQZGv
You don't have ) in your document and extra ) at the end. Remove it and it will work..
$(document).ready(function(){
var laterbox=document.getElementById('laterbox');
var tabl=document.createElement('table');
var trh=document.createElement('tr');
var trd=document.createElement('tr');
var txt=document.createTextNode('book_id');
var tr1=document.createElement('th');
tr1.appendChild(txt);
trh.appendChild(tr1);
tabl.appendChild(trh);
tabl.appendChild(trd);
laterbox.appendChild(tabl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
<table>
<tr>
<th>aa</th>
<th>bb</th>
</tr>
<tr>
</tr>
</table>
</div>
Tip: If your code is not working try to look at the console if there is an error.. Missing or extra bracket and parenthesis will be displayed as an error in there..
$(document).ready(function() {
var laterbox = document.getElementById('laterbox');
var tabl = document.createElement('table');
var trh = document.createElement('tr');
var trd = document.createElement('tr');
var txt = document.createTextNode('book_id');
var tr1 = document.createElement('th');
tr1.appendChild(txt);
trh.appendChild(tr1);
tabl.appendChild(trh);
tabl.appendChild(trd);
laterbox.appendChild(tabl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
<table>
<tr>
<th>aa</th>
<th>bb</th>
</tr>
<tr>
</tr>
</table>
</div>
$(document.ready(function() { => $(document).ready(function() {
You have some typo errors:
$(document.ready(function() { should be $(document).ready(function() {
Closing })); should be });
Here is the corrected code:
$(document).ready(function() {
var laterbox=document.getElementById('laterbox');
var tabl=document.createElement('table');
var trh=document.createElement('tr');
var trd=document.createElement('tr');
var txt=document.createTextNode('book_id');
var tr1=document.createElement('th');
tr1.appendChild(txt);
trh.appendChild(tr1);
tabl.appendChild(trh);
tabl.appendChild(trd);
laterbox.appendChild(tabl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laterbox">
<table>
<tr>
<th>aa</th>
<th>bb</th>
</tr>
<tr>
</tr>
</table>
</div>