I would like to know how to create sub-header columns by only using javascript. My data is coming from server so I just want to create columns and subheaders.
So columns I have already created but how to have subheader with only javascript ( css can be there) but not with the help of html that I am not able to get.
Can someone help me with this.
this is some demo of table -
here at top I need to add two subheader with 3 columns
$(document).ready(function() {
$('#addSubHeader').click(function() {
var subHeader = "<tr><th>3</th><th>4</th>><th>5</th><th>6</th></tr>";
$(subHeader).appendTo("thead");
});
});
th {
text-align:center;
}
td {
width: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th colspan="2">1</th>
<th colspan="2">2</th>
</tr>
</thead>
<tbdody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</tbdody>
</table>
<button id="addSubHeader">
add a subheader</button>
</button>
Related
Using Javascript (with JQuery), I would like to delete all rows in a table except the header row.
This seems like a simple thing because I see quite a few posts on StackOverFlow about this and a lot of solutions provided and accepted. But, none of them seem to work for me. Please refer to my code below:
function delTable() {
console.log("Delete all rows, but the header");
// Option-A
// $('#TableA tbody tr').remove();
// Option-B
// Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
// $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();
// Option-C
$('#TableA tbody').empty();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body onLoad="delTable();">
<table id="TableA">
<th>
<tr>
<td>Col A</td>
<td>Col B</td>
</tr>
</th>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
Does any one know what I am doing wrong? Thanks.
-Karthik
Just update your th to thead and you good to go, see below:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body onLoad="delTable()">
<table id="TableA">
<thead>
<tr>
<td>Col A</td>
<td>Col B</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
JS:
function delTable() {
console.log("Delete all rows, but the header");
// Option-A
// $('#TableA tbody tr').remove();
// Option-B
// Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
// $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();
// Option-C
$('#TableA tbody').empty();
}
Working fiddle:
https://jsfiddle.net/pvfkxdby/1/
You need to replace th with thead and use $('#TableA tbody').find("tr") as follows:
function delTable() {
console.log("Delete all rows, but the header");
$('#TableA tbody').find("tr").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body onLoad="delTable();">
<table id="TableA">
<thead>
<tr>
<td>Col A</td>
<td>Col B</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
This worked for me. You set apart your header with <th> instead of <thead> and then you had <td> in your header instead of <th>.
$(document).ready(() => {
$("#delete").click(() => {
$("#TableA tbody tr").remove()
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="TableA">
<thead>
<tr>
<th>Col A</th>
<th>Col B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<button id="delete">delete</button>
By inspecting your HTML in my Google Chrome I can see that the rows were rearranged so that even the first line is inside <tbody> tag. Therefore the whole table is removed. You can fix this simply by wrapping the first row in <thead> tag or use different approach which does not use <tbody> tag.
That would be a simple one-liner:
function delTable() {
console.log("Delete all rows, but the header");
$('#TableA').find("tr:not(:first)").remove(); // Code to remove all rows in table except the header row
}
What the given code does is identify the rows in the table 'TableA' that is not the first row using the command: $('#TableA').find("tr:not(:first)") and subsequently remove the rows using the .remove() command.
I have the following table that pull out from database within loop.
I would like to drag and drop the following rows.
The rowspan of "Sort" button column is dynamic. (It will be the count of rows).
My problem is when I drag the row to sort, I don't want to include "Sort" button column.
After I drag the first row, "Sort" button column has been moved with the dragged row as the following.
Thanks
Poor Semantics
The main problem here is that your save button is part of your table. Why? The table element is used to represent tabular data, and a button isn't tabular data.
You'd avoid this problem completely if your HTML was more accurately semantic:
<!-- Section A -->
<section>
<table>
...
</table>
<button>Save</button>
</section>
With this, you'd be able to drag rows and not worry about your button being included in the drag at all. You'd have a separate section element wrapping each of your related section tables, and the button is standalone.
Using CSS we can style the button to be where we want it in relation to the table. A first step being to set the table to display: inline-table to allow the button to sit beside it.
Demo
section {
margin-bottom: 20px;
}
table {
display: inline-table;
vertical-align: top;
}
th, td {
text-align: left;
}
button {
vertical-align: bottom;
}
<section>
<table>
<thead>
<tr>
<th colspan="3">Section A</th>
</tr>
<tr>
<th>Name</th>
<th>Section</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>13</td>
<td>SG</td>
</tr>
<tr>
<td>BB</td>
<td>16</td>
<td>JP</td>
</tr>
</tbody>
</table>
<button>Save</button>
</section>
<section>
<table>
<thead>
<tr>
<th colspan="3">Section B</th>
</tr>
<tr>
<th>Name</th>
<th>Section</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>13</td>
<td>SG</td>
</tr>
<tr>
<td>BB</td>
<td>16</td>
<td>JP</td>
</tr>
</tbody>
</table>
<button>Save</button>
</section>
I need to stress that this is about HORIZONTAL scrolling with THE FIRST COLUMN FIXED because most answers are giving me solutions to vertical scrolling.
Is it possible using pure css to have a table that scrolls horizontally but the first header and first column are fixed with the rest of the content scrollable?
For example if I had this table:
<table>
<thead>
<tr>
<th class="head1">Head 1</th>
<th class="head2">Head 2</th>
<th class="head2">Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
The head1 and col1 would always be shown with the other columns scrollable.
This is what I was after. The example uses 2 tables that are floated left with an overflow applied to a div that wraps the right most table. Both tables are contained in a div with a fixed width.
<div class="table-container">
<div class="left">
<table>
...
</table>
</div>
<div class="right">
<table>
...
</table>
</div>
</div>
.table-container {
position: relative;
width: 600px;
height: 100%;
display: inline-block;
}
table {
float: left;
}
.right {
overflow: auto;
}
<table >
<tr>
<th>abc</th>
<th>xyz</th>
</tr>
<tr>
<td colspan="2">
<div style="height:50px; overflow:scroll;">
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Please check it. It may be work.
I am trying to create a 2x2 grid of tables in HTML, where each table is independently collapsible. I can't seem to figure out a proper solution. For example, the version below somewhat works, but unfortunately when the R1C1 table is hidden, the row 2 tables become joined with the first row.
<!DOCTYPE html>
<!-- Attempt at a 2x2 grid of tables, each independently collapsible
Based on following web pages (among others):
- http://www.delphifaq.com/faq/javascript/f1030.shtml
- http://www.w3schools.com/css/css_table.asp
-->
<html>
<head>
<title>2x2 table grid</title>
<style>
table, th, td
{
border-collapse:collapse;
border:1px solid black;
width=50%
}
</style>
<script language="JavaScript" type="text/javascript">
function setDivStyle(table, style) {
// Set the display style
var tbl = document.getElementById(table);
tbl.style.display = style;
console.log(table + " display style set to " + style)
}
</script>
</head>
<body>
<div id="r1">
<h2>Row 1</h2>
<div id="r1-controls">
<a id="r1c1-hide" href="javascript:setDivStyle('r1c1', 'none')">Hide R1C1</a>
<a id="r1c2-show" href="javascript:setDivStyle('r1c1', 'inline')">Expand R1C1</a>
<a id="r1c2-hide" href="javascript:setDivStyle('r1c2', 'none')">Hide R1C2</a>
<a id="r1c2-show" href="javascript:setDivStyle('r1c2', 'inline')">Expand R1C2</a>
<br>
</div>
<table id="r1c1" style="display: inline; float: left">
<tr>
<th>R1C1a</th>
<th>R1C1b</th>
<th>R1C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
<table id="r1c2" style="display: block; float: none">
<tr>
<th>R1C2a</th>
<th>R1C2b</th>
<th>R1C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</div>
<div id="r2">
<h2>Row 2</h2>
<div id="r2-controls">
<a id="r2c1-hide" href="javascript:setDivStyle('r2c1', 'none')">Hide R2C1</a>
<a id="r2c1-show" href="javascript:setDivStyle('r2c1', 'inline')">Expand R2C1</a>
<a id="r2c2-hide" href="javascript:setDivStyle('r2c2', 'none')">Hide R2C2</a>
<a id="r2c2-show" href="javascript:setDivStyle('r2c2', 'inline')">Expand R2C2</a>
<br>
</div>
<table id="r2c1" style="display: inline; float: left">
<tr>
<th>R2C1a</th>
<th>R2C1b</th>
<th>R2C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
<table id="r2c2" style="display: block; float: none">
<tr>
<th>R2C2a</th>
<th>R2C2b</th>
<th>R2C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</div>
</body>
</html>
I've had problems similar to this before. Its the float:left that is causing Row 2 to move up when R1C2 is hidden. I recommend creating another function that will toggle float:left when you hide R1C2 like so:
function setFloat(element, style) {
var el = document.getElementById(element);
el .style.float = style;
console.log(element + " float style set to " + style)
}
and calling it: javascript:setDivStyle('r1c2', 'none');setFloat('r1c1','none');
I have a table that looks something like this:
<asp:Repeater ID="myRepeater" runat="server">
<div id="divTable" class="divTable">
<table id="myTable">
<thead>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
</thead>
<tbody id="myContent">
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td id="findMe">
<%#Eval("IsFlagged")%>
</td>
</tr>
</tbody>
</asp:Repeater>
</table>
</div>
Now, here's what I'm trying to do. If <%#Eval("IsFlagged")%> returns anything at all, i'd like to make all the cells in the table row a certain color.
I've been reading about .contains(), but I haven't found an example that simply asks "if not null, apply a .css style to the rest of the cells of the table row".
I put together an example in jsfiddle: http://jsfiddle.net/aMR5r/
Edit: Your edit makes the code a little simpler, but it's the same principle.
$(function(){
var isFlagged = $('#findMe').text();
if(isFlagged.length > 0)
{
$('#findMe').parent().addClass('yellow');
}
});
http://jsfiddle.net/aMR5r/1/
First, try to give that specific td a class or someting so you can target it. Then you can check the length of $('td.yourclassname').html();
If you are using VB.Net then you can use this code..
<tr style="background-color:<%# IIF(IsDBNull(Eval("IsFlagged"),"none","yellow") %>">
you can apply this logic to TD also.