Develop Reference

make empty table before adding elements

im trying to make a table that fills some space before adding rows...
i tried making an empty row with a height of like 500px but this dosnt seems to work as intended.
<table>
<thead>
<tr>
<th>ID ARTICULO</th>
<th>NOMBRE</th>
<th>FORMATO</th>
<th>CANTIDAD</th>
<th>POR</th>
<th>TOTAL</th>
<th>LOTE</th>
<th>FECHA VENC</th>
<th>Valor Tot</th>
<th>Valor Unit</th>
</tr>
</thead>
<tbody>
<tr style="height:500px ;"></tr>
</tbody>
</table>
I want to make it look like there are 10 empty rows and when adding elements with JS they appear occuping those spaces in order
This is the expected result, but its made with flash

You could use a row of empty td that has your height set to 500px and uses a repeating background linear gradient. Below the nth-child code is for when you have actual rows of data and the :first-child:last-child is for when you don't have any data as the row will be the only child:
table {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
}
tbody tr:nth-child(odd) td {
background: #cccccc;
}
tbody tr:nth-child(even) td {
background: #ffffff;
}
tbody tr:first-child:last-child td {
/* the 50px increments here is the height of the td divided by 10 to make it look like you have ten rows) */
background: repeating-linear-gradient(#cccccc, #cccccc 50px, #ffffff 50px, #ffffff 100px);
);
}
<table>
<thead>
<tr>
<th>ID ARTICULO</th>
<th>NOMBRE</th>
<th>FORMATO</th>
<th>CANTIDAD</th>
<th>POR</th>
<th>TOTAL</th>
<th>LOTE</th>
<th>FECHA VENC</th>
<th>Valor Tot</th>
<th>Valor Unit</th>
</tr>
</thead>
<tbody>
<tr style="height:500px;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

This is one of the many ways to achieve the result of having an empty table with a function that will populate the next available empty row (if any).
initTable(5);
const fixedRow = [1,2,3,4,5,6,7,8,9,10] ;
function initTable(nRows){
const nCols = document.querySelectorAll('#mytable thead tr th').length;
const tbody = document.querySelector('#mytable tbody');
for(let j=0; j<nRows; j++){
const tr = document.createElement('tr');
tr.setAttribute('data-empty', 'true');
for(let k=0; k<nCols; k++){
const td = document.createElement('td');
tr.appendChild(td);
}
tbody.appendChild(tr);
}
}
function populateNextEmptyRow(datarow){
const table = document.querySelector('#mytable');
const firstEmptyRow = document.querySelector('#mytable tbody tr[data-empty=true]');
if (firstEmptyRow == null){
console.log('no more available empty rows');
return;
}
let i=0;
for(cellvalue of datarow){
firstEmptyRow.children[i].innerText = cellvalue;
i++;
}
firstEmptyRow.setAttribute('data-empty', 'false');
}
#mytable td{
border: solid 1px lightgray;
height: 2rem;
text-align: center;
}
button {
cursor: pointer;
margin-top: 5px;
}
<table id="mytable">
<thead>
<tr>
<th>ID ARTICULO</th>
<th>NOMBRE</th>
<th>FORMATO</th>
<th>CANTIDAD</th>
<th>POR</th>
<th>TOTAL</th>
<th>LOTE</th>
<th>FECHA VENC</th>
<th>Valor Tot</th>
<th>Valor Unit</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button onclick="populateNextEmptyRow(fixedRow);">populateNextRow</button>

You probably can't make the width of the row/table 500px because the actual width of the table is around 700px given the current font size of the headings. So you may want to reduce those down to about 0.7em.
But you can also build the rows/cells using a helper function so you don't have to hardcode them in the HTML, and then you can style the table/cells using CSS.
// Take in a number, a type, and a value,
// create a new array of template strings
// and then join that array up into an HTML string
function builder(n, type, value) {
return new Array(n)
.fill('')
.map(el=> `<${type}>${value}</${type}>`)
.join('');
}
// Create some HTML: a set of 10 rows that have 10 cells
const html = builder(10, 'tr', builder(10, 'td', ' '));
// Attach that HTML to the table body
const tbody = document.querySelector('tbody');
tbody.innerHTML = html;
table { border-collapse: collapse; border: 1px solid #565656; width:500px; table-layout: fixed; }
th { font-size: 0.7em; background-color: white; text-transform: lowercase; }
th:first-letter { text-transform: capitalize; }
th, td { border: 1px solid #dfdfdf; padding: 0 0.3em;}
tr:nth-child(odd) {background-color: #efefef;}
td { width: 10%; }
<table>
<thead>
<tr>
<th>ID ARTICULO</th>
<th>NOMBRE</th>
<th>FORMATO</th>
<th>CANTIDAD</th>
<th>POR</th>
<th>TOTAL</th>
<th>LOTE</th>
<th>FECHA VENC</th>
<th>Valor Tot</th>
<th>Valor Unit</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

How to make a partially un-editable table cell compatible with inline JavaScript functions?

So, a few days ago, I posted this question (nearly identical) and received a very helpful response.
However, in order to make a table calculator, I already have a id set to every table row of a certain column to turn the table into a calculator, which kind of messes up the answer for the original question when I try to apply it for myself (the JavaScript parses the unit "kg" in with the number and displays a sum as "NaN").
As well, there is a visible text box displayed inside of every cell with the answer above, which looks kind of ugly. My current code has cells that don't appear as text boxes but are still editable, which makes for a much sleeker experience in my opinion (I know it makes no functional difference, but the appearance is something that bugs me a lot!)
Below is a mock-up of what I'd like the code to look like. I'm trying to make the numbers/input appear on the right side of the text box, but still on the left side of the unit ("kg").
Below is a mock-up of what I am trying to create (except the numbers would be on the right).
Here is the code I have:
<head>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
width: 100%;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>entry1</td>
<td id="entry1" oninput="myFunction()">4000</td>
</tr>
<tr>
<td>entry2</td>
<td id="entry2" oninput="myFunction()">200</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("entry1").contentEditable = true;
document.getElementById("entry2").contentEditable = true;
function myFunction() {
var entry1 = document.getElementById("entry1").innerText;
var entry2 = document.getElementById("entry2").innerText;
var total2 = parseInt(entry1) + parseInt(entry2);
document.getElementById("total").innerHTML = total2;
}
myFunction();
</script>
</body>
As you can see, it adds up the numbers in the right column and displays a sum in the final row. However, I would like units to display here (e.g. "kg") on the side, that aren't editable and, more importantly, don't get parsed as a number in the JavaScript function. Would be great if the ugly textbox outline doesn't appear inside the cell, too.
Is this possible? Any answers appreciated!

You get NaN when you call parseInt on an empty string. To fix this, change following statement from
var total = parseInt(jack2) + parseInt(john2) + parseInt (joe2);
to
var total = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt (joe2) || 0);
and to display the unit alongside the number in the right column, add 2 span elements inside the td element and use flexbox to align them properly.
To make the number editable, add contentEditable attribute on the span element containing the number. span element containing the unit will be non-editable by default.
function myFunction() {
var jack2 = document.getElementById("jack").innerText;
var john2 = document.getElementById("john").innerText;
var joe2 = document.getElementById("joe").innerText;
var total = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt(joe2) || 0);
document.getElementById("total").innerHTML = total;
}
myFunction();
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
}
th,
td {
padding: 5px;
}
td:last-child {
display: flex;
justify-content: space-between;
border: none;
}
td:last-child span:first-child {
flex-grow: 1;
margin-right: 10px;
outline: none;
text-align: right;
}
#total {
display: flex;
justify-content: flex-end;
}
<table>
<thead>
<tr>
<th>Person</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td id="jack" oninput="myFunction()">
<span contentEditable="true">4</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>John</td>
<td id="john" oninput="myFunction()">
<span contentEditable="true">2</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>Joe</td>
<td id="joe" oninput="myFunction()">
<span contentEditable="true">3</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>

To avoid the result being "NAN", an if is added and we check the one of the seals is empty '' and replace it with a 0.
In the edit cell two divs are added one to edit the value and the other to add the text "kg".
<style>
table {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
width: 100%;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
padding: 5px;
}
.input_{
width: 90%;
float: left;
}
.peso{
width: 10%;
float: right;
}
</style>
<table>
<tr>
<th>Person</th>
<th>Weight</th>
</tr>
<tr>
<td>Jack</td>
<td>
<div class="input_" id="jack" oninput="myFunction()">1</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>John</td>
<td>
<div class="input_" id="john" oninput="myFunction()">2</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>Joe</td>
<td>
<div class="input_" id="joe" oninput="myFunction()">3</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("jack").contentEditable = true;
document.getElementById("john").contentEditable = true;
document.getElementById("joe").contentEditable = true;
function myFunction() {
var jack2 = document.getElementById("jack").innerText;
var john2 = document.getElementById("john").innerText;
var joe2 = document.getElementById("joe").innerText;
if(jack2==""){
jack2=0;
}
if(john2==""){
john2=0;
}
if(joe2==""){
joe2=0;
}
var total2 = parseInt(jack2) + parseInt(john2) + parseInt (joe2);
document.getElementById("total").innerHTML = total2+" kg";
}
myFunction();
</script>

Jquery filter table if fits into input range

Question:
I have a HTML with type number i want to ge the value using jQuery create a range by adding 10% on either side then checking if each row falls in the range if not hide the row.
Code:
HTML
<input type="number" id="myPrice" onkeyup="myPriceFunction()" placeholder="Enter amount.." title="Type in a amount" min="0">
JavaScript/jQuery
$(document).ready(function(){
$("#myPrice").on("keyup", function() {
priceLow = $(this).val() * 0.9;
priceHigh = $(this).val() * 1.1;
});
});
JS fiddle
https://jsfiddle.net/nx30zqjd/7/
Other:
I am using:
.addClass('discarded').hide();
.removeClass('discarded').show();
to hide and show rows
Expected Results:
I want the range to be created with priceLow and priceHigh then get price column get rid of $ and check if it falls within range if not hide using code above.
Update:
I added
$(this).closest('tr').removeClass('discarded').show();
} else {
$(this).closest('tr').addClass('discarded').hide();
}
however then this shows nothing because i don't check discarded rows, if i remove the check for discarded rows it doesn't apply my search to the range not sure if there is a easy way to have both but it seems to be ok for the moment
If you need any more information please ask.
Thanks

You can use this, you just need to iterate and get the values and then check, based on that you can hide and show.
$("#myPrice").on("keyup", function() {
if ($(this).val() === '') {
$("#myTable tr").show();
return;
}
priceLow = $(this).val() * 0.9;
priceHigh = $(this).val() * 1.1;
$("#myTable tr td:nth-child(2)").each(function(e) {
var value = this.textContent.replace('$', '');
if (value >= priceLow && value <= priceHigh) {
$(this).closest('tr').show();
} else {
$(this).closest('tr').hide();
}
})
});
$(document).ready(function() {
});
$(document).ready(function() {
$("#myPrice").on("keyup", function() {
if ($(this).val() === '') {
$("#myTable tr").show();
return;
}
priceLow = $(this).val() * 0.9;
priceHigh = $(this).val() * 1.1;
$("#myTable tr td:nth-child(2)").each(function(e) {
var value = parseFloat(this.textContent.replace('$', ''));
if (value >= priceLow && value <= priceHigh) {
$(this).closest('tr').removeClass('discarded').show();
} else {
$(this).closest('tr').addClass('discarded').hide();
}
})
});
});
<style>* {
box-sizing: border-box;
}
#mySearch {
background-image: url('https://www.w3schools.com/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
.show {
display: block;
}
a {
color: blue;
text-decoration: none;
/* no underline */
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>CPUs</h2>
CPU
Motherboards
<input type="number" id="myPrice" placeholder="Enter amount.." title="Type in a amount" min="0">
<input type="text" id="mySearch" placeholder="Search for cpus.." title="Type in a cpu name">
<table id='myTable'>
<thead>
<tr>
<th>CPU</th>
<th>Price</th>
<th>Mark</th>
<th>Value</th>
<th>Socket</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href='mobo.php?cpu_name=AMD Ryzen 5 2600"' target='_blank'>AMD Ryzen 5 2600</a></td>
<td>$246.05</td>
<td>13537</td>
<td>55.02</td>
<td>AM4</td>
<td><img src=NA height='42' width='42'></td>
</tr>
</tbody>
<tbody>
<tr>
<td><a href='mobo.php?cpu_name=Intel Core i7-8700K"' target='_blank'>Intel Core i7-8700K</a></td>
<td>$585.90</td>
<td>15957</td>
<td>27.24</td>
<td>LGA1151</td>
<td><img src=". $row[" url "]." height='42' width='42'></td>
</tr>
</tbody>
</table>

How to enable new added row clickable in html table?

I have a table with each row having a class ".clickablerow" and I defined onclick function when click on this row, a dialog will show up then I can insert above or below some text as new row. The question is, though I've added ".clickablerow" to these new added rows, they are actually not clickable and no such dialog showing up.
My code is like:
JS:
$(document).ready(function() {
$(".clickable-row").click(function(){
var i = $(this).rowIndex;
var html = "<tr class='clickable-row' > <td> a test </td></tr>";
$('#table_id > tbody > tr').eq(i).after(html);
});
HTML:
<head>
...
<link rel="stylesheet" href="../static/css/main.css">
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<script src="./static/js/jquery.min.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<script src="./static/js/jquery.expander.min.js" type="text/javascript"></script>
<script src="./static/js/main.js" type="text/javascript"></script>
....
<head>
<body>
....
<table>
<tbody>
<tr class='clickable-row' >
<td style="border: 0;"> Initial message ....</td>
</tr>
</tbody>
</table>
....
</body>
If I click on the row, a new row with class 'clickable-row' will be added, however, that new row is not clickable. Any idea are welcome!
Thanks

Just delegate the click event to the <table> or the <tbody>:
const tableBody = document.getElementById('tableBody');
tableBody.onclick = (e) => {
const target = e.target;
let row = target;
while (!row.classList.contains('clickable-row') && row !== tableBody) row = row.parentElement;
if (row === tableBody) {
return; // Ignore the click if we could not find a .clickable-row
}
const newRow = tableBody.insertRow(target.rowIndex);
newRow.className = Math.random() < 0.5 ? 'clickable-row' : 'disabled-row';
newRow.innerHTML = '<td>...</td>';
};
table {
font-family: monospace;
width: 100%;
border-collapse: collapse;
text-align: center;
user-select: none;
}
tr.disabled-row {
background: #EEE;;
}
tr.clickable-row {
cursor: pointer;
}
tr.clickable-row:hover {
background: yellow;
}
td {
border: 2px solid black;
padding: 8px 4px;
}
<table>
<tbody id="tableBody">
<tr class="clickable-row"><td>...</td></tr>
</tbody>
</table>
With jQuery, you can use .on():
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored. On a data table with 1,000 rows in its tbody, this example attaches a handler to 1,000 elements:
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
An event-delegation approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody):
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
The previous example would then look like this:
$('#tableBody').on('click', '.clickable-row', (e) => {
$(e.currentTarget).after(`<tr class=${ Math.random() < 0.5 ? 'clickable-row' : 'disabled-row' }><td>...</td></tr>`);
});
table {
font-family: monospace;
width: 100%;
border-collapse: collapse;
text-align: center;
user-select: none;
}
tr.disabled-row {
background: #EEE;;
}
tr.clickable-row {
cursor: pointer;
}
tr.clickable-row:hover {
background: yellow;
}
td {
border: 2px solid black;
padding: 8px 4px;
}
<table>
<tbody id="tableBody">
<tr class="clickable-row"><td>...</td></tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Create a "delegated" binding by using on().
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time.
$('#table_id').on('click', '.clickable-row', function() {
debugger;
var i = this.rowIndex;
var html = "<tr class='clickable-row' > <td> a test " + i + "</td></tr>";
$('#table_id > tbody > tr').eq(i).after(html);
});
table#table_id {
border-collapse: collapse;
}
#table_id tr {
background-color: #eee;
border-top: 1px solid #fff;
}
#table_id tr:hover {
background-color: #ccc;
}
#table_id th {
background-color: #fff;
}
#table_id th,
#example td {
padding: 3px 5px;
}
#table_id td:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_id">
<tbody>
<tr class='clickable-row' data-href='url://'>
<td style="border: 0;"> Initial message ....</td>
</tr>
</tbody>
</table>

Odd border around html table cell with colspan?

My question is similar to THIS question, but I'm unable to use divs instead of colspans with a table.
It appears to be an issue that only appears in chrome, but I need to find a workaround.
My use case is very similar to the one below. Notice how the top border for 3.3 spans two columns, which is clearly not right. In my use case, the user is able to change which cells are merged so I can't set the border for a specific cell.
How do you set a cell's border to be confined to its own cell instead of sharing with a common cell whose colspan is greater than 1?
HTML
<div style="padding: 10px">
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td colspan="2">2.3</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td>4.4</td>
<td>4.5</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
<td>5.4</td>
<td>5.5</td>
</tr>
</table>
</div>
CSS
table {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
}
td {
border: 1px solid lightgrey;
height: 60px;
width: 60px;
text-align: center;
vertical-align: middle;
}
td.active {
border: 1px solid blue;
}
td.brdr-b-hide {
border-bottom: none;
}
td.brdr-r-hide {
border-right: none;
}
JavaScript
var fnActivate = function(target) {
target.addClass('active');
if(!target.is(':first-child')) {
target.prev().addClass('brdr-r-hide')
}
var tr = target.closest('tr');
if(!tr.is(':first-child')) {
var prevTr = tr.prev();
$('td', prevTr).eq($('td', tr).index(target)).addClass('brdr-b-hide');
}
};
var fnDeactivate = function(target) {
target.removeClass('active');
if(!target.is(':first-child')) {
target.prev().removeClass('brdr-r-hide')
}
var tr = target.closest('tr');
if(!tr.is(':first-child')) {
var prevTr = tr.prev();
$('td', prevTr).eq($('td', tr).index(target)).removeClass('brdr-b-hide');
}
}
$('table').on('click', 'td', function(e){
var target = $(e.currentTarget);
if(e.ctrlKey && target.hasClass('active')){
fnDeactivate(target);
} else if(e.ctrlKey) {
fnActivate(target);
} else {
fnDeactivate($('table td.active'));
fnActivate(target);
}
});
CODE: Plunkr

Issue was fixed by using:
table {
border-collapse: separate;
}
Code: Plunkr
It's a little different on the front end as each cell now has its own border of 1px, but it's a good workaround for the time being.

I think this usecase is best adressed with the outline css property.
See: http://jsfiddle.net/4zxv4o59/
td.active {
outline: 1px solid blue;
}
Outlines do not take up space, they are drawn above the content.
from https://developer.mozilla.org/en/docs/Web/CSS/outline