when I am inserting data into table it is automatically inserting one row in the bottom. How can I remove a extra blank row from the table
<table>
<tr>
<th>Name</th>
<th>Comment</th>
<th>Posted Date</th>
</tr>
<tr>
<td id ="result_name"></td>
<td id="result_comment"></td>
<td id="posteddate"></td>
</tr>
</table>
Add a style with visibility:collapse
<html>
<table border="1">
<tr>
<th>Name</th>
<th>Comment</th>
<th>Posted Date</th>
</tr>
<tr style="visibility:collapse">
<td id="result_name"></td>
<td id="result_comment"></td>
<td id="posteddate"></td>
</tr>
</table>
</html>
You can try to do it by using jquery:
$("td").each(function() {
if (this.innerText === '') {
this.closest('tr').remove();
}
});
This function will check all the "td" and remove them if they do not have any text inside.
You can use jQuery function to check the data is empty or not.
$("td").each(function() {
if (this.innerText === '') {
this.closest('tr').remove();
}
});
<table>
<tr>
<th>Name</th>
<th>Comment</th>
<th>Posted Date</th>
</tr>
<tr>
<td id ="result_name"></td>
<td id="result_comment"></td>
<td id="posteddate"></td>
</tr>
</table>
Related
There is a table:
<table style="width:920px;" id="tblPotrawySkladniki">
<thead>
<tr>
<td class="cell0 style1"><p style="font-style:italic;">Nazwa produktu</p></td>
<td class="cell1 style1"><p style="font-style:italic;">Waga [g]</p></td>
</tr>
</thead>
<tbody>
<tr>
<td>banana</td>
<td>10</td>
</tr>
<tr>
<td>orange</td>
<td>20</td>
</tr>
<tr>
<td>raspberry</td>
<td>35</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="cell0 style1"><p style="font-weight:bold;">TOTAL</p></td>
<td class="cell1 style1"><p style="font-weight:bold;"></p></td>
</tr>
</tfoot>
</table>
How can I sum up all cells in tbody second column and put the result in tfoot cell also second column?
The table is dynamic. I would like to use jquery.
This would be one way of doing it:
let sum=$("#tblPotrawySkladniki tbody td:nth-child(2)").get().reduce((a,c)=>
+$(c).text().replace(",",".")+a,0);
$("#tblPotrawySkladniki tfoot td:nth-child(2)").text(sum);
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table id="tblPotrawySkladniki">
<thead>
<tr>
<td class="cell0 style1"><p style="font-style:italic;">Nazwa produktu</p></td>
<td class="cell1 style1"><p style="font-style:italic;">Waga [g]</p></td>
</tr>
</thead>
<tbody>
<tr>
<td>banana</td>
<td>10</td>
</tr>
<tr>
<td>orange</td>
<td>20,3</td>
</tr>
<tr>
<td>raspberry</td>
<td>35,5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="cell0 style1"><p style="font-weight:bold;">TOTAL</p></td>
<td class="cell1 style1"><p style="font-weight:bold;"></p></td>
</tr>
</tfoot>
</table>
Instead of parseInt() my script makes use of implicit type conversion with the unary + operator before $(c).text().
You can use jQuery .each() to cycle through the second td of each row, access the contents of the element using $(this).text(), then add them up as you go.
You should parse the value first so that they will add up as numbers and not concatenate.
let values = 0;
jQuery('table tbody tr td:nth-of-type(2)').each(function(){
let value = parseInt($(this).text(),10);
values += value;
});
console.log(values);
<table style="width:920px;" id="tblPotrawySkladniki">
<thead>
<tr>
<td class="cell0 style1">
<p style="font-style:italic;">Nazwa produktu</p>
</td>
<td class="cell1 style1">
<p style="font-style:italic;">Waga [g]</p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>banana</td>
<td> 10</td>
</tr>
<tr>
<td>orange</td>
<td> <span class='price'>20</span></td>
</tr>
<tr>
<td>raspberry</td>
<td> <span class='price'>35</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2" style="text-align:center"><span id="sum"></span></th>
</tr>
</tfoot>
$(document).ready(function() {
$('.price').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function() {
var value = parseInt($('.price', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('#sum').eq(index).text('Total: ' + total);
}
I am trying to add a row with double height to that of other row. But unable to make. Not sure what is wrong.
<table border="1">
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
You'll need some css to set the height of the row;
table td, tr {
height: 30px;
}
table td, tr {
height: 30px;
}
<table border="1">
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</tbody>
</table>
Note; You should add a tbody to your table; What is the purpose for HTML's tbody?
Are you trying to do that ?
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td rowspan="2">A4/B4 <br>(2 rows)</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td colspan="2">C2/C3 <br>(2 cols)</td>
<td>C4</td>
</tr>
</table>
The rowspan property should only be used if you are trying to have one cell appear across two rows (as if you are using the Merge Cells functionality on Excel). If you want to make one row twice as high as the other, this is a display property and should be done with css or inline styling. The middle (row) should also be removed.
If this is just a general example and you need to use it on something more complex. If you use rowspan on say 1 element, you will need to make sure that the following row has 1 less td element otherwise it will not display correctly.
<table border="1">
<tr style="height: 50px">
<td >A1</td>
<td >A2</td>
<td >A3</td>
<td >A4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
I have a nested table as follows -
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Requirement - Only TEXTA and TEXTB should be colored in red. In real scenario there are many rows. I want only the first td of each row in the parent table to be colored. I am doing something like -
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
This is not giving me any result. What is the correct way of achieving this?
Spent a while playing around with this. The best I can do is to suggest using 2 lines of CSS rather than 1. One selector to do all of the first row of td and one to set the nested ones back to how they belong.
table.parent tr:first-child td {
color: red;
}
table.nested tr:first-child td {
color: black;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
You said that..
I want only the first td of each row in the parent table to be colored
So, I am assuming you want TEXTA and TEXTC to be colored (and not TEXTB as you stated).
If thats the case, then your idea was to select elements (first td of each row) if they dont contain a specific child element (table.nested).
This is not possible with CSS2 or CSS3.
The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.
See CSS selector - element with a given child
Edit
You can use jquery/javascript to do so.
For example, to add opacity and color css properties:
$(document).ready(function(){
$('table.parent > tbody > tr > td:first-child').each(function(){
if ($(this).has('table.nested').length == 0){
$(this).css('opacity', '0.5');
$(this).css('color', 'red');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Just give some class to TEXTA & TEXTB
for example:
(html)
<td class="red-color-text">TEXTA</td>
<td class="red-color-text">TEXTB</td>
(css)
.red-color-text{color: red;}
I have a table where I want to sort a column "BugId".
The inbuilt bootstrap sorting sorts in a particular fashion where ID-1 is followed by ID-11,then ID-12 and so on,(in an alphabetic fashion) whereas I want ID-1 to be followed by ID-2, then ID-3 ....ID-11 and so on.(in a numerical fashion)
This is how my table looks:
<table id="myTable" class="footable table table-striped toggle-arrow-tiny m-xxs" data-page-size="1000">
<thead>
<tr>
<th >Bug ID</th>
<th>Component</th>
<th data-sort-ignore="true">Report Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
Can I change the sorting for only one column in this fashion?
<table data-toggle="table" id="myTable" class="footable table table-striped toggle-arrow-tiny m-xxs" data-page-size="1000">
<thead>
<tr>
<th data-field="bugid" data-sortable="true" data-sort-name="_bugid_data" data-sorter="bugidsorter" >Bug ID</th>
<th data-field="component" data-sortable="true" >Component</th>
<th data-sort-ignore="true">Report Date</th>
</tr>
</thead>
<tbody><tr>
<td data-bugid="1">id-1</td>
<td >x</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="2" >id-2</td>
<td >a</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="3">id-3</td>
<td >b</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="4">id-4</td>
<td >c</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="5">id-5</td>
<td >d</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="6">id-6</td>
<td >e</td>
<td>11/12/2015</td>
</tr>
<tr>
<td data-bugid="10">id-10</td>
<td >e</td>
<td>11/12/2015</td>
</tr>
</tbody>
</table>
sorting function
function bugidsorter(a, b) {
console.log(a);
if (a.bugid < b.bugid) return -1;
if (a.bugid > b.bugid) return 1;
return 0;
}
fiddle
http://jsfiddle.net/6ecr4/8/
$(document).ready(function () {
$(".items").tablesorter();
$('.items tr:even').addClass('ItemEvenRow');
$('.items tr').hover(function () {
$(this).addClass("ItemRowHover");
}, function () {
$(this).removeClass("ItemRowHover");
});
});
HTML :
<table class="items">
<thead>
<tr class="">
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td >Bach</td>
<td >Frank</td>
<td >fbach#yahoo.com</td>
<td >$50.00</td>
<td >http://www.frank.com</td>
</tr>
<tr >
<td >Doe</td>
<td >Jason</td>
<td>jdoe#hotmail.com</td>
<td >$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
The even rows do not possess the hover, but only the odd ones.
Require both, even, as well as, odd rows to change their background on mouse-over.
The headers should be as they are without any changes.
The hover isn't working on even rows because of css precedence. Make the selector more specific like this (add a tr in front; updated demo):
tr.ItemRowHover {background-color:#A00000; }