I have been success to make increment no on column.
Here my code
table {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
<table border="1">
<tr>
<th>No</th> <th>Name</th>
</tr>
<tr>
<td></td> <td>jhon</td>
</tr>
<tr>
<td></td> <td>lucy</td>
</tr>
<tr>
<td></td> <td>joe</td>
</tr>
</table>
but i want to make table number like image on below
You must reset your counter on the second <tr>
table tr:nth-child(2){
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
<table border="1">
<tr>
<th>#</th> <th>Name</th>
</tr>
<tr>
<td></td> <td>jhon</td>
</tr>
<tr>
<td></td> <td>lucy</td>
</tr>
<tr>
<td></td> <td>joe</td>
</tr>
</table>
On the table element your counter is 1, on the first row it is incremented to 2. Hence starting at 2. You need to do the reset on the first tr.
table tr {
counter-increment: rowNumber;
}
table tr:first {
counter-reset: rowNumber;
}
Reset the counter at the second tr.
tr:nth-child(2) {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
<table border="1">
<tr>
<th>No</th>
<th>Name</th>
</tr>
<tr>
<td></td>
<td>jhon</td>
</tr>
<tr>
<td></td>
<td>lucy</td>
</tr>
<tr>
<td></td>
<td>joe</td>
</tr>
</table>
Here is the code to fix your issue. In your code you are counting the row number which is row number 2 in you case. so it is starting from 2.
One of the solution to your problem is use thead and tbody tags and increment the row counter from tbody as done it in below solution.
table tbody {
counter-reset: rowNumber;
}
table tbody tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
<table border="1">
<thead>
<tr>
<th>No</th> <th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td></td> <td>jhon</td>
</tr>
<tr>
<td></td> <td>lucy</td>
</tr>
<tr>
<td></td> <td>joe</td>
</tr>
</tbody>
</table>
Related
Assuming I have a table with column and row spans I am looking for a way to find the header that uniquely identifies a cell.
For this table:
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid gray;
}
<table>
<thead>
<tr>
<th colspan="2">col1</th>
<th rowspan="2">col2</th>
<th rowspan="3">col3</th>
</tr>
<tr>
<th>col4</th>
</tr>
<tr>
<th colspan="2">col5</th>
<th>col7</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>value1</td>
<td>value2</td>
<td>value3</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/j3kqrpt0/
I would like to get the following header
col5
col5
col3
col7
Basically, all you have to do is -
Inside table, create thead element, which stands for table head
Create new table row - tr, which is going to be filled with column headers that you need
And lastly, add those th (table header) elements that you need.
Then, in the body of the table you go the same way, just with different elements:
Create tbody element
Create tr element
Fill tr with table data - td
Here is the code snippet.
table, th, td {
border: 1px solid;
}
<table>
<thead>
<tr>
<th>col5</th>
<th>col5</th>
<th>col3</th>
<th>col7</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>value1</td>
<td>value2</td>
<td>value3</td>
</tr>
</tbody>
</table>
I have a 3*3 table. I need to remove 3rd column if there is no content to display in it.In my js file I wrote something like below.
$('table tbody tr td').each(function () {
if (tempHTML.indexOf("#E") !== -1) { // true
$(this).attr("colspan", 2);
$(this).next("td").remove(); // removes extra td
}
});
tempHtml is my html, in my js file what should be the this to set colspan attribute?
Expected result is to increase the colspan and remove the next td and to have a 3*2 table. Please explain with detail as I'm new to js and html.
As nobody seems interested in answering you, and you asked how to realize your request in javascript, in spite of having presented code in jQuery, here is a solution:
const MyTableBody = document.querySelector('#Table-3cols tbody')
, BtRemC3 = document.querySelector('#Bt-Clean-col3')
BtRemC3.onclick=_=>
{
MyTableBody
.querySelectorAll('td:nth-child(3)')
.forEach(xTD=>
{
if (xTD.textContent==='')
{
let pTR = xTD.parentElement
pTR.removeChild(xTD)
pTR.cells[1].colSpan = 2
}
}
)
}
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .6em 1em}
thead { font-weight: bold }
<button id="Bt-Clean-col3">Remove empty Cols 3</button>
<table id="Table-3cols">
<thead>
<tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr>
</thead>
<tbody>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td></td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td></td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
</tbody>
</table>
explanations for: (arrow functions)
BtRemC3.onclick=_=>
{
MyTableBody
.querySelectorAll(`td:nth-child(3)`)
.forEach(xTD=>
{
this is like :
BtRemC3.addEventListener('click', function()
{
MyTableBody.querySelectorAll('td:nth-child(3)').forEach( function(xTD)
{
so, for the complete code this is :
const MyTableBody = document.querySelector('#Table-3cols tbody')
, BtRemC3 = document.querySelector('#Bt-Clean-col3')
;
BtRemC3.addEventListener('click', function()
{
MyTableBody.querySelectorAll('td:nth-child(3)').forEach( function(xTD)
{
if (/#E/.test(xTD.textContent) ) // previously (xTD.textContent==='')
{
let pTR = xTD.parentElement;
pTR.removeChild(xTD);
pTR.cells[1].colSpan = 2;
}
});
});
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .6em 1em}
thead { font-weight: bold }
<button id="Bt-Clean-col3">Remove Cols 3 with '#E'</button>
<table id="Table-3cols">
<thead>
<tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr>
</thead>
<tbody>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>blah blah blah#E blah </td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>blah blah#E blah </td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
</tbody>
</table>
I also changed the test about your #E value
regular expression to test if xTD.textContent contain '#E'
please read How to check whether a string contains a substring in JavaScript?
There are a couple of things you need to do:
First, if you're using each, you should pass in the index and the value. Then use the value when getting tempHTML, and doing your modifications to the HTML.
$('table tbody tr td').each(function (i,f) {
var tempHTML = $(f).text();
if (tempHTML.indexOf("#E") !== -1) { //true
$(f).attr("colspan", 2);
$(f).next().remove();
}
});
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .6em 1em}
thead { font-weight: bold }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
<tr>
<td>AEC</td>
<td>D#EF</td>
<td>GHI</td>
</tr>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
</table>
I am building a bootstrap table: JSBin:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
table.table-border {
border: 2px solid #E6E9ED;
}
table, th, td {
border: 1px solid #E6E9ED;
text-align: center
}
</style>
</head>
<body>
<div class="table-responsive">
<table class="table table-condensed table-border table-striped">
<thead>
<tr>
<th colspan="2">h12</th>
<th colspan="4">h345</th>
</tr>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
<th>h5</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>efg</td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>hij</td><td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I want to hide the borders between the columns h1 and h2, between h3 and h4, and between h4 and h5. Does anyone know how to do it? A solution with JavaScript will be fine too...
Assuming that you want the borders to be removed, or made transparent, between each pair of odd and even <td> elements, then the following works:
thead tr:nth-child(2) th:nth-child(odd) {
border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(even) {
border-left-width: 0;
}
table.table-border {
border: 2px solid #E6E9ED;
}
table,
th,
td {
border: 1px solid #E6E9ED;
text-align: center
}
thead tr:nth-child(2) th:nth-child(odd) {
border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(even) {
border-left-width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="table-responsive">
<table class="table table-condensed table-border table-striped">
<thead>
<tr>
<th colspan="2">h12</th>
<th colspan="4">h345</th>
</tr>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
<th>h5</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>efg</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>hij</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
JS Fiddle demo.
This styles all the odd-numbered (th:nth-child(odd)) <th> elements within the second <tr> (tr:nth-child(2)) within the <thead> element with a border-right-width of 0 (effectively hiding it, although border-right-color: transparent; or border-right-style: none would achieve a very similar end-result).
The second selector does precisely the same thing, but selects the even-numbered children of the second <tr> of the <thead>.
In view of the comment below, clarifying the requirements:
Sorry, I also want to delete the borders in Rows 3, 4, 5, between the columns h1 and h2, between h3 and h4, and between h4 and h5.
I'd suggest amending the selectors to the following:
thead tr:nth-child(2) th:nth-child(odd),
tbody tr td:nth-child(odd) {
border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(even),
tbody tr td:nth-child(even) {
border-left-width: 0;
}
table.table-border {
border: 2px solid #E6E9ED;
}
table,
th,
td {
border: 1px solid #E6E9ED;
text-align: center
}
thead tr:nth-child(2) th:nth-child(odd),
tbody td:nth-child(odd) {
border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(even),
tbody td:nth-child(even) {
border-left-width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="table-responsive">
<table class="table table-condensed table-border table-striped">
<thead>
<tr>
<th colspan="2">h12</th>
<th colspan="4">h345</th>
</tr>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
<th>h5</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>efg</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>hij</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
JS Fiddle demo.
This does exactly the same as above, but also selects the odd, and even, <td> children of the tbody and styles them appropriately along with the <th> elements of the second <tr> of the <thead>.
While all the requirements were in the question I appear to have studiously misread the question, for reasons unknown. With the prompt, again, in comments below:
I also want to delete the border between h4 and h5
The approach here remains the same, but we use slightly more complex selectors by which to select the appropriate elements:
/* Selects the first <th> child of the second <tr>
descendent of the <thead>, and also every first
<td> child contained within the <tbody>: */
thead tr:nth-child(2) th:first-child,
tbody td:first-child {
border-right-width: 0;
}
/* Selects the second <th> child of the second <tr>
descendent of the <thead>, and also every second
<td> child contained within the <tbody>: */
thead tr:nth-child(2) th:nth-child(2),
tbody td:nth-child(2) {
border-left-width: 0;
}
/* Selects every <th> element that follows the second
<th> child element of the second <tr> of the <thead>
using the general sibling ('~') combinator; and also
every <td> that appears after the second <td> of the
<tbody>: */
thead tr:nth-child(2) th:nth-child(2) ~ th,
tbody td:nth-child(2) ~ td {
border-left-width: 0;
}
/* Because we (presumably) want the final <th> and <td>
of each <tr> to retain its right-border, we here select
every <th> element which is not the last-child of its
parent which follows the second-child of the parent, and
similarly for the <td> elements: */
thead tr:nth-child(2) th:nth-child(2) ~ th:not(:last-child),
tbody td:nth-child(2) ~ td:not(:last-child) {
border-right-width: 0;
}
table.table-border {
border: 2px solid #E6E9ED;
}
table,
th,
td {
border: 1px solid #E6E9ED;
text-align: center
}
thead tr:nth-child(2) th:first-child,
tbody td:first-child {
border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(2),
tbody td:nth-child(2) {
border-left-width: 0;
}
thead tr:nth-child(2) th:nth-child(2) ~ th,
tbody td:nth-child(2) ~ td {
border-left-width: 0;
}
thead tr:nth-child(2) th:nth-child(2) ~ th:not(:last-child),
tbody td:nth-child(2) ~ td:not(:last-child) {
border-right-width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="table-responsive">
<table class="table table-condensed table-border table-striped">
<thead>
<tr>
<th colspan="2">h12</th>
<th colspan="4">h345</th>
</tr>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
<th>h5</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>efg</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>hij</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
JS Fiddle demo.
You need to set the border equal to 0px on both the left and right sides of the border you're getting rid of.
So for example:
<td style="border-right:0px;"> abc </td>
<td style="border-left:0px;"></td>
This should be the whole code below. Try it out.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
table.table-border {
border: 2px solid #E6E9ED;
}
table, th, td {
border: 1px solid #E6E9ED;
text-align: center
}
</style>
</head>
<body>
<div class="table-responsive">
<table class="table table-condensed table-border table-striped">
<thead>
<tr>
<th colspan="2">h12</th>
<th colspan="4">h345</th>
</tr>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
<th>h5</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-right:0px;">abc</td><td style="border-left:0px;" > </td><td style="border-right:0px;"></td><td style="border-left:0px; border-right:0px;"></td><td style="border-left:0px;""></td>
</tr>
<tr>
<td style="border-right:0px;">efg</td><td style="border-left:0px;" > </td><td style="border-right:0px;"></td><td style="border-left:0px; border-right:0px;"></td><td style="border-left:0px;""></td>
</tr>
<tr>
<td style="border-right:0px;">hij</td><td style="border-left:0px;" > </td><td style="border-right:0px;"></td><td style="border-left:0px; border-right:0px;"></td><td style="border-left:0px;""></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I want to create a master-detail. So, I follow this tutorial:
http://mrbool.com/how-to-create-a-master-detail-table-with-html-css-and-jquery/26848
I decided to reproduce it, but there is something wrong in my code(?).
Here's my code:
HTML/jQuery
<!DOCTYPE html>
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
$(".clk").click(function () {
var index = $(this).parent().parent().index();
var detail = $(this).parent().parent().next();
var status = $(detail).css("display");
if (status === "none")
$(detail).css("display", "table-row");
else
$(detail).css("display", "none");
});
});
</script>
</head>
<body>
<table id="tbSales" rules="rows">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Date</th>
<th>Items</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="saleRow">
<td></td>
<td>01</td>
<td>01/01/2001</td>
<td>2</td>
<td>10,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>Product A 1</td>
<td>1</td> <td>7,00</td>
</tr>
<tr>
<td>A2</td>
<td>Product A 2</td>
<td>1</td>
<td>3,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="saleRow">
<td></td>
<td>02</td>
<td>02/02/2001</td>
<td>3</td>
<td>20,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>Product B 1</td>
<td>1</td>
<td>10,00</td>
</tr>
<tr>
<td>B2</td>
<td>Product B 2</td>
<td>2</td>
<td>5,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tbody>
</table>
</body>
CSS:
#tbSales, .tbItems{
width:100%;
border:solid 1px;
}
#tbSales thead th, .tbItems thead th{
text-align:left;
}
#tbSales tr td, .tbItems tr td{
border:solid 1px;
}
#tbSales tr td:nth-child(1){
width:20px;
}
#tbSales tbody tr{
background:#DCDCDC;
}
.tbItems tr{
background:red;
}
#tbSales thead{
background:#4682B4;
}
.itemsRow{
display: none;
}
.tbItems{
font-size:12px;
}
This is what should happen:
This is what happen to me:
The row is empty! Why?
$("td:nth-child(1)")
Is overriding all first children from table.
You need to specify the line in which you want to replace the cell:
$(".saleRow td:nth-child(1)")
Your first line of javascript replaces the contents of all first children from your table.
Change :
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
with :
$("td:nth-child(1)").css("border","red dashed 2px")
and you'll see what I mean.
See it here : http://codepen.io/jeremythille/pen/qELyWX
td:nth-child(1) means "Every first <td> of each <tr> of the whole table". But you have nested tables...
How can I get the td width and make it dynamically change once you added a long text to them... Because I'm planning to have a table-body scrollable.. and I don't want to use the clone() is there way to make it happen?..
Here's the markup:
<div class="table-cont">
<div class="table-header">
<table>
<caption>
</caption>
<tbody>
<tr>
<td>Width 1</td>
<td>Width 2</td>
<td>Width 3</td>
<td>Width 4</td>
<td>Width 5</td>
<td>Width 6</td>
</tr>
</tbody>
</table>
</div>
<div class="table-body">
<table>
<tbody>
<tr>
<td>Width 1</td>
<td>Width 2</td>
<td>Width 3</td>
<td>Width 4</td>
<td>Width 5</td>
<td>Width 6</td>
</tr>
</tbody>
</table>
</div>
script:
var tableHeader = $('.table-header').children('table').outerWidth(true);
var tableWidth = $('.table-header table tr td').width();
alert(tableWidth);
$('table-body tr td').append(tableWidth);
css:
.table-header,
.table-body{
border: 1px solid #d3d3d3;
display: inline-block;
}
table {
border-collapse: 0;
border-spacing: 0;
border: 0;
}
table thead th,
table tbody tr td{
border-right: 1px solid #d3d3d3;
padding: 5px 8px;
font-weight: normal;
table-layout: fixed;
}
table thead th:last-child,table tbody tr td:last-child{
border-right: 0;
}
If you want to set the width use:
$('table-body tr td').width(tableWidth);
Try this,
var tableHeader = $('.table-header').children('table').outerWidth(true);
var tableWidth = $('.table-header table tr td').width();
alert(tableWidth);
$('.table-body table tr td').each(function(){
$(this).append(' '+tableWidth);
});
Fiddle
Updated for making the th with the same width as of td.
$('.table-body table tr th').each(function(){
$(this).append(' '+tableWidth);
});