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>
Related
Hi my tab is generate by an app and i can't add in the html code the thead and tbody tags.
So i would like add with javascript the tags
actually my code is :
...
<table id="__bookmark_1">
<tr>
<th>name</th>
<th>adress</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
...
and i would like
...
<table id="__bookmark_1">
<thead>
<tr>
<th>name</th>
<th>adress</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tbody>
</table>
...
Thanks
hi in fact it to use datatables code
i have founfd the way to
var myTable = jQuery("#__bookmark_1");
var thead = myTable.find("thead");
var thRows = myTable.find("tr:has(th)");
if (thead.length===0){ //if there is no thead element, add one.
thead = jQuery("<thead></thead>").appendTo(myTable);
}
var copy = thRows.clone(true).appendTo("thead");
thRows.remove();
I'm trying to hide element from table with the following structure by data attribute
I'm trying to hide the element with attribute data-th like that:
$('table.mui-table.schedule-table tbody tr > [data-th="Principal"]').hide();
Also
$('table.mui-table.schedule-table tbody tr td [data-th="Principal"]').hide();
Here's the code:
const hideOne = () =>
$('table.mui-table.schedule-table tbody tr > [data-th="Principal"]').hide();
const hideTwo = () =>
$('table.mui-table.schedule-table tbody tr td [data-th="Principal"]').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="mui-table schedule-table" data-mui-borders="true">
<thead>
<tr class="schedule-head">
<th>Payment</th>
<th>Payment Amt</th>
<th>Principal</th>
<th>Interest</th>
<th>Total Interest</th>
<th>Balance</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Payment">1</td>
<td data-th="Payment Amt">€90.39</td>
<td data-th="Principal">€90.00</td>
<td data-th="Interest">€0.39</td>
<td data-th="Total Interest">€0.39</td>
<td data-th="Balance"><strong>€-0.00</strong></td>
</tr>
</tbody>
</table>
<button onclick="hideOne()">One</button>
<button onClick="hideTwo()">Two</button>
I would like to make a table row component that can contain a slot which has html in it. The problem is that the browser hoists the text out of the table before vuejs has a chance to render it.
For example, I'd like to make a table like this https://codepen.io/mankowitz/pen/LqLRWr
td, th {
border: 1px solid red;
}
.main-table {
border: 2px solid blue;
}
<table class="main-table">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Collapsed row</td>
</tr>
<tr>
<td>
<p>text</p>
<table>
<tr>
<th>embedded table header</th>
</tr>
<tr>
<td>embedded table text</td>
</tr>
</table>
</td>
<td> Col2 </td>
<td> Col3 </td>
</tr>
<tr>
<td>
regular row col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>
However, when I put it in a vue template, the formatting is all wrong. See https://codepen.io/mankowitz/pen/PVmBxV
Vue.component("table-row", {
props: ["collapsed"],
template: `
<tr>
<td v-if="collapsed" colspan="3">collapsed row</td>
<td v-if="!collapsed"> <slot /> </td>
<td v-if="!collapsed"> col2 </td>
<td v-if="!collapsed"> col3 </td>
</tr>
`
});
const example = {};
const app = new Vue(example);
app.$mount("#app");
th, td {
border: 1px solid red;
padding: 1px;
}
.main-table {
border: 2px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table class="main-table">
<thead>
<tr>
<th>Main Col 1</th>
<th>Main Col 2</th>
<th>Main Col 3</th>
</tr>
</thead>
<tbody>
<!-- This row has table inside table -->
<table-row :collapsed="1">
<p>title text</p>
<table>
<tr>
<th>embedded table header</th>
</tr>
<tr>
<td>embedded table text</td>
</tr>
</table>
</table-row>
<!-- This row is normal -->
<table-row :collapsed="0">
This row is not collapsed
</table-row>
<!-- This row is collapsed (hidden) -->
<table-row :collapsed="1">
This row is collapsed
</table-row>
</tbody>
</table>
</div>
I made it work with the vue render function, you can probably do it with the template, but it will be longer:
Vue.component("table-row", {
props: ["collapsed"],
render: function(h) {
if (this.collapsed == 1) {
return h('tr', [h('td', {attrs: {colspan: 3}}, 'collapsed')]);
}
return h('tr', this.$slots.default);
}
});
const app = new Vue({el: '#app'});
th, td {
border: 1px solid red;
padding: 1px;
}
.main-table {
border: 2px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table class="main-table">
<thead>
<tr>
<th>Main Col 1</th>
<th>Main Col 2</th>
<th>Main Col 3</th>
</tr>
</thead>
<tbody>
<!-- This row has table inside table -->
<tr is="table-row" :collapsed="0">
<td>
<p>title text</p>
<table>
<tr>
<th>embedded table header</th>
</tr>
<tr>
<td>embedded table text</td>
</tr>
</table>
</td>
<td></td>
<td></td>
</tr>
<!-- This row is normal -->
<tr is="table-row" :collapsed="0">
<td>This row is not collapsed</td>
<td></td>
<td></td>
</tr>
<!-- This row is collapsed (hidden) -->
<tr is="table-row" :collapsed="1">
<td>This row is collapsed</td>
</tr>
</tbody>
</table>
</div>
Note that if you use the slot as per my example you'll still have to include the <td> nodes.
I am trying to get just one ID when I click the Delete button, but I am receiving the whole list of it. Here is how I tried with jQuery. (solutions in both js and jquery is welcome)
the DOM :-
<tbody>
<tr class="tablerow">
<td class="delete"> </td>
<td class="id"></td>
</tr>
</tbody>
appending the data to the DOM (100 data is being fetched):-
let apiGetter = JSON.parse(localStorage.getItem('data'));
apiGetter.map((item,index) => {
del.append('<li> DELETE </li>');
id.append(`<li> ${item.id}</li>`);
}
My Solution that is listing all the ids that are in the DOM. (i want the id of the button that's clicked on)
$('.delete').click(function() {
let id = $(this).next('.id').text();
console.log(id); // 0 1 2 3 4 5 6 ... 98 99 100
})
Follow this code
HTML
<table>
<thead>
<tr>
<th>ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="delete" data-id="1">Delete</td>
</tr>
<tr>
<td>2</td>
<td class="delete" data-id="2">Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3</td>
<td class="delete" data-id="3">Delete</td>
</tr>
</tfoot>
</table>
Jquery
$(document).on('click','.delete',function(){
alert($(this).data('id'));
})
CSS
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
It very easy and it will work.
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>