Hide borders of some columns in a table - javascript

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>

Related

Drag and Drop table rows (asp.net mvc)

I need some help with integrating drag and drop functionality into my project. I tried many different ways, but everything is unsuccessful. I stopped on using jquery, however I still have the issue make it running. I will highly appreciate any help.
Here is my view:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#table-1 tr:hover {
background-color:aqua;
color:#fff;
}
</style>
</head>
<body>
<div class="table-responsive">
<table class="table" id="table-1" cellspacing="0" cellpadding="2">
<thead>
<tr>
<th>ID</th>
<th>Number</th>
<th> Description</th>
</tr>
</thead>
<tbody style="cursor:pointer;">
<tr id="1"><td><div class="dragitem">1</div></td><td><div class="dragitem">One</div></td><td>some text</td></tr>
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
</tbody>
</table>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("table-1").sortable();
})
</script>
In your code you want to short whole table not tr inside tbody, so why your code is fail. Use tbody selector to short table row.
$("#table-1 tbody").sortable();
Note: You are using id so don't forget to add # .
Example:
$(document).ready(function() {
$("#table-1 tbody").sortable();
})
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#table-1 tr:hover {
background-color: aqua;
color: #fff;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<div class="table-responsive">
<table class="table" id="table-1" cellspacing="0" cellpadding="2">
<thead>
<tr>
<th>ID</th>
<th>Number</th>
<th> Description</th>
</tr>
</thead>
<tbody style="cursor:pointer;">
<tr id="1">
<td>
<div class="dragitem">1</div>
</td>
<td>
<div class="dragitem">One</div>
</td>
<td>some text</td>
</tr>
<tr id="2">
<td>2</td>
<td>Two</td>
<td>some text</td>
</tr>
<tr id="3">
<td>3</td>
<td>Three</td>
<td>some text</td>
</tr>
<tr id="4">
<td>4</td>
<td>Four</td>
<td>some text</td>
</tr>
<tr id="5">
<td>5</td>
<td>Five</td>
<td>some text</td>
</tr>
<tr id="6">
<td>6</td>
<td>Six</td>
<td>some text</td>
</tr>
</tbody>
</table>
</div>

HTML prev function on td is returning null or empty

In a <table>with check box in the Last column, on selection of whcih I want to sum the values of previous two <td>.
The js function should sum the values of the columns for which the CheckBox is ticked. But I am stuck at locating the previous <td> itself. The Snippet is as follows.
function doSumAeFunction(){
var prevCell = $(this).closest('tr').prev('td').text();
console.log(prevCell);
alert(prevCell);
}
table {
table-layout: fixed;
width: auto;
border-collapse: collapse;
border: 3px solid purple;
}
table,
th,
td {
border: 1px solid;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<table style="table table-bordered text-center" style="width:auto">
<thead>
<th>Sl No</th>
<th>English</th>
<th>Geography</th>
<th>Maths</th>
<th>Science 2</th>
<th align="center">Select</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>22</td>
<td>15</td>
<td>12</td>
<td>15</td>
<td><input type="checkbox" value="checked" onclick="doSumAeFunction()" /></td>
</tr>
<tr>
<td>1</td>
<td>8</td>
<td>7</td>
<td>10</td>
<td>5</td>
<td><input type="checkbox" value="checked" onclick="doSumAeFunction()" />
</tr>
</tbody>
</table>
<br />
<div>
<div>Sum of Marks</div>
<div id="sum_of_maths">Sum of Maths is: </div>
<div id="sum_of_science">Sum of Science is: </div>
</div>
To get the value in the cell before the checkbox use $(this).parent().prev('td').text():
$('input[type="checkbox"]').change(function() {
var prevCell = $(this).parent().prev('td').text();
console.log(prevCell);
})
table {
table-layout: fixed;
width: auto;
border-collapse: collapse;
border: 3px solid purple;
}
table,
th,
td {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<table style="table table-bordered text-center" style="width:auto">
<thead>
<th>Sl No</th>
<th>English</th>
<th>Geography</th>
<th>Maths</th>
<th>Science 2</th>
<th align="center">Select</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>22</td>
<td>15</td>
<td>12</td>
<td>15</td>
<td><input type="checkbox" value="checked" /></td>
</tr>
<tr>
<td>1</td>
<td>8</td>
<td>7</td>
<td>10</td>
<td>5</td>
<td><input type="checkbox" value="checked" />
</tr>
</tbody>
</table>
<br />
<div>
<div>Sum of Marks</div>
<div id="sum_of_maths">Sum of Maths is: </div>
<div id="sum_of_science">Sum of Science is: </div>
</div>

How to make a <tr> element in vuejs that contains <slot> with html

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.

Targeting even rows of table through jQuery

I want to give orange color to even rows through jQuery in table.
But that is not working for me.
Below is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
Below is the code in custom.css:
table,table td{
border: 1px solid white;
background: green;
color: white;
}
.highlight{
background: orange;
}
Below is the code in custom.js:
$(document).ready(function(){
$('.myTable tr:even').addClass('.highlight');
});
I am a beginner in jQuery.
I am looking for a short and simple way.
$(document).ready(function(){
$('.myTable tr:even').addClass('highlight');
});
Remove dot from addClass function
You dont really need jQuery to get this effect. Unless, you have a specific use case / requirement, you could just use the odd, even pseudo classes to accomplish your need.
Here is a sample.
table,
table td {
border: 1px solid white;
background: green;
color: white;
}
table tr:nth-child(even) td {
background-color: orange;
}
.highlight {
background: orange;
}
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>
This is a small example using CSS and jQuery :
// Execute a function when the DOM is fully loaded.
$(document).ready(function () {
// Set the .alt class for the alternate rows
$('.myTable tr:nth-child(even)').addClass('alt');
});
/** Style for the body **/
body {
font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}
/** Main class for the alternate rows **/
.alt {
background-color:#eee;
}
/** Style for the table **/
.myTable {
border-collapse:collapse;
font-size: 0.917em;
max-width:500px;
min-width:450px;
}
.myTable td {
border:1px solid #333;
padding:4px 8px;
}
.myTable td:nth-child(1) {
width:200px;
}
.myTable td:nth-child(2) {
width:150px;
}
.myTable td:nth-child(3) {
width:100px;
}
/** Style for the cointainer **/
#body {
clear: both;
margin: 0 auto;
max-width: 534px;
}
html, body {
background-color:White;
}
hr {
margin-bottom:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="body">
<h3>Table 1</h3>
<table class="myTable">
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td>1600</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
<h3>Table 2</h3>
<table class="myTable">
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
</div>
You are almost there. The problems in your code are
You want to highlight td and your selector is tr.
Syntax for .addClass() should be addClass('highlight') and not addClass('.highlight').
Replace this:
$(document).ready(function(){
$('.myTable tr:even').addClass('.highlight');
});
with:
$(document).ready(function(){
$('.myTable td:odd tr').addClass('highlight');
});
According to documentation :odd selects even rows:
In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.
RUNNING CODE:
$(document).ready(function(){
$('.myTable tr:odd td').addClass('highlight');
});
table,table td{
border: 1px solid white;
background: green;
color: white;
}
.highlight{
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>

How to get the width of the td dynamically

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);
});

Categories