In my Blazor server app, I am reading the CNC Files of a remote machine and listing them in the table's rows.
So far everything is OK.
When the user clicks on one TD element, the content of the CNC file will be shown on the screen in another table(This part I have not shown because it is not related to my problem)
I want that the last choosen CNC file (last clicked ) should be highlighted (font=red).
That means each time when the user selects another CNC-File, just the related should be higlighted all others should be in default color (black).
If I would have a static table I would use the a:focus. But my problem is that my td's will be generated dynamically. And I have to apply the a:focus function for just one td (that was clicked).
How can I do that?
I have tried to call a function in the style of the td style="#Style_CNC_File()" but the colors that I define in the function are applied to all of the td's.
Here is my code:
<table >
<tr>
<td>CNC Files</td>
</tr>
#{ if (Deltalogic.Return_Read_CNC_File == 0 && Deltalogic.Selected_CNC_File_Path_Type == "file")
{
for (var i = 0; i < Deltalogic.CNC_File_Array_lenght_dir - 1; i++)
{
var arg0 = "abc";
var arg1 = "def";
var arg2 = "ghi";
<tr >
<td style="#Style_CNC_File()" #onclick='#(e => Read_CNC_Files(arg0,arg1,arg2))'>/#Deltalogic.CNC_File_Out_Array_dir[i]</td>
</tr>
}
}
}
</table>
In my razor.cs file:
public string Style_CNC_File()
{
if (var_clicked == true)
{
return "color:#FF0000";
}
else
{
return "color:#000000";
}
}
Maybe you can set an id to your td and store the selected id :
<tr>
<td>CNC Files</td>
</tr>
#{ if (Deltalogic.Return_Read_CNC_File == 0 && Deltalogic.Selected_CNC_File_Path_Type == "file")
{
for (var i = 0; i < Deltalogic.CNC_File_Array_lenght_dir - 1; i++)
{
var arg0 = "abc";
var arg1 = "def";
var arg2 = "ghi";
<tr >
<td #onclick='#(e => HandleClick(i, arg0,arg1,arg2))' style="#Getstyle(i)">/#Deltalogic.CNC_File_Out_Array_dir[i]</td>
</tr>
}
}
}
</table>
#code {
int selectedId = -1;
void HandleClick(int id, string args0, string args1, string args2)
{
selectedId = i;
Read_CNC_Files(arg0,arg1,arg2);
}
void Getstyle(int id)
{
if (selectedId == i)
return "background-color:red;";
return string.Empty;
}
}
You can change the class or style as you want according to the index of the line.
I have some HTML table (without tbody tag) where I want to convert the HTML data into key-value pair(header-data) in jQuery array.
When you run code snippet, the output I get is only for last row.
************Actual Output************
[
"Company:Swiggy",
"Contact:Gotya",
"Country:Japan"
]
************Needed Output************
[
"Company:Creamy Cola",
"Contact:Atharva",
"Country:Switzerland"
],
[
"Company:Tuty Fruity",
"Contact:Suyog",
"Country:UK"
],
[
"Company:Milky Way",
"Contact:Santosh",
"Country:US"
],
[
"Company:Swiggy",
"Contact:Gotya",
"Country:Japan"
]
I checked below references too, but couldn't find logic.
Convert HTML Rows into Name Value Pair in JQuery
get values from table as key value pairs with jquery
Thanks in advance for your help.This is what I have tried so far, please run snippet to get answer in console.
/******JQUERY SCRIPT******/
/*Get Header*/
var xKey = [];
$("#xxx th").each(function() {
var tempColName = $(this).text(); {
xKey.push(tempColName);
}
});
//console.log("Key");
//console.log(xKey);
/*Get Data*/
var xValue = [];
$("#xxx tr").each(function() {
var arrayOfThisRow = [];
var tableData = $(this).find('td');
if (tableData.length > 0) {
tableData.each(function() {
arrayOfThisRow.push($(this).text());
});
xValue.push(arrayOfThisRow);
}
});
//console.log("Value");
//console.log(xValue);
//My logic below
var xFinalArr = [];
for (var i = 0; i < xKey.length; i++) {
var su = "";
for (var j = 0; j < xValue.length; j++) {
su = xKey[i] + ":" + xValue[j][i];
}
xFinalArr.push(su);
}
console.log("Output");
console.log(xFinalArr);
/******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;
}
<!--HTML-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<table id="xxx">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Creamy Cola</td>
<td>Atharva</td>
<td>Switzerland</td>
</tr>
<tr>
<td>Tuty Fruity</td>
<td>Suyog</td>
<td>UK</td>
</tr>
<tr>
<td>Milky Way</td>
<td>Santosh</td>
<td>US</td>
</tr>
<tr>
<td>Swiggy</td>
<td>Gotya</td>
<td>Japan</td>
</tr>
</table>
</body>
</html>
It looks like what you are asking for is a 2-D array of results, though you are only currently storing results in a single-dimensional array. Perhaps you should try something like this:
var xFinalArr = [];
for (var i = 0; i < xValue.length; i++) {
var xRowArr = [];
for (var j = 0; j < xKey.length; j++) {
xRowArr.push(xKey[j] + ":" + xValue[i][j]);
}
xFinalArr.push(xRowArr);
}
I suspect, however, that what you actually want is an array of objects, which is only slightly different code:
var xFinalArr = [];
for (var i = 0; i < xValue.length; i++) {
var xRowObj = {};
for (var j = 0; j < xKey.length; j++) {
xRowObj[xKey[j]] = xValue[i][j];
}
xFinalArr.push(xRowObj);
}
This is, of course, predicated on the assumption that no cells span multiple rows or columns, that each row has an identical number of columns, and that the header values translate into reasonable property names (though technically the code will still work if they do not).
I have model like this:
{
"TaskDate": "2015-01-04T00:00:00",
"TimesheetList": [
{
"WorkItemId":24,
"ProjectId":3,
"ProjectName":"Hello world",
"UserId":12,
"UserName":"Anatoliy Svetliakov",
"Date":"2015-01-04T22:00:00",
"Task":"#34 : New task test",
"TimeWorked":2,
"Note":null,
"InProgress":false
}
]
}
This data shows in table with infinite-scroll. I need to create custom filter, that will filtering data by Name and/or Data(from-to). Please give me an idea how to do this. I've created function but it doesn't work.
.filter('tsFilter', function() {
return function(model, filter) {
var filtered = [];
if (model != null) {
for (var i = 0; i < model.length; i++) {
filtered[i] = model[i];
}
}
if (filter != null) {
if (filter.UserId != null) {
for (i = 0; i < filtered.length; i++) {
for (var j = 0; j < filtered[i]['List'].length; j++) {
if (filtered[i].List[j].UserId != filter.UserId) {
filtered.splice(j, 1);
j--;
}
}
}
}
}
for (i = 0; i < filtered.length; i++) {
if (filtered[i].List.length == 0) {
filtered.splice(i, 1);
i--;
}
}
return filtered;
};
})
On page table shows as:
<div class="timesheet-table-container">
<table class="table-timesheet" id="table-body" infinite-scroll-immediate-check="false" infinite-scroll="loadMore()" infinite-scroll-distance="1">
<tbody ng-repeat="item in model | tsFilter: filter | limitTo: limits track by $index">
<tr class="timesheet-day-block">
<td colspan="6">
<span class="timesheet-date">{{item.TaskDate | dateFilter}}</span>
</td>
</tr>
<tr class="timesheet-table-rows" ng-repeat="list in item.List" ng-form="logged">
<td>{{list.ProjectName}}</td>
<td>{{list.UserName}}</td>
<td>{{list.Date | date: 'dd/MM/yyyy'}}</td>
<td>{{list.Task}}</td>
<td>{{list.TimeWorked}}</td>
<td>
<span style="width: 85%">{{list.Note}}</span>
<button class="active-delete-button" ng-click="removeTask(list)" style="display: inline-block; float:right">вњ–</button>
</td>
</tr>
</tbody>
</table>
</div>
demo: http://so.devilmaycode.it/filtering-model-on-client-angularjs/
please refer to demo source code.
I have seen many ways to make the header fixed on a standard table, but usually this involves cloning the table (to match the variable widths). This of course would not work for me as the header is clickable, allowing people to sort the contents of certain rows.
So, is there a way to essentially 'freeze' the header row while still retaining the functionality of the sort?
Here is the basic table code (all css kept in 'stylesheet' for cleanliness & likewise with js)
var stIsIE = /*#cc_on!#*/false;
sorttable = {
init: function() {
// quit if this function has already been called
if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
// kill the timer
if (_timer) clearInterval(_timer);
if (!document.createElement || !document.getElementsByTagName) return;
sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
forEach(document.getElementsByTagName('table'), function(table) {
if (table.className.search(/\bsortable\b/) != -1) {
sorttable.makeSortable(table);
}
});
},
makeSortable: function(table) {
if (table.getElementsByTagName('thead').length == 0) {
// table doesn't have a tHead. Since it should have, create one and
// put the first table row in it.
the = document.createElement('thead');
the.appendChild(table.rows[0]);
table.insertBefore(the,table.firstChild);
}
// Safari doesn't support table.tHead, sigh
if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0];
if (table.tHead.rows.length != 1) return; // can't cope with two header rows
// Sorttable v1 put rows with a class of "sortbottom" at the bottom (as
// "total" rows, for example). This is B&R, since what you're supposed
// to do is put them in a tfoot. So, if there are sortbottom rows,
// for backwards compatibility, move them to tfoot (creating it if needed).
sortbottomrows = [];
for (var i=0; i<table.rows.length; i++) {
if (table.rows[i].className.search(/\bsortbottom\b/) != -1) {
sortbottomrows[sortbottomrows.length] = table.rows[i];
}
}
if (sortbottomrows) {
if (table.tFoot == null) {
// table doesn't have a tfoot. Create one.
tfo = document.createElement('tfoot');
table.appendChild(tfo);
}
for (var i=0; i<sortbottomrows.length; i++) {
tfo.appendChild(sortbottomrows[i]);
}
delete sortbottomrows;
}
// work through each column and calculate its type
headrow = table.tHead.rows[0].cells;
for (var i=0; i<headrow.length; i++) {
// manually override the type with a sorttable_type attribute
if (!headrow[i].className.match(/\bsorttable_nosort\b/)) { // skip this col
mtch = headrow[i].className.match(/\bsorttable_([a-z0-9]+)\b/);
if (mtch) { override = mtch[1]; }
if (mtch && typeof sorttable["sort_"+override] == 'function') {
headrow[i].sorttable_sortfunction = sorttable["sort_"+override];
} else {
headrow[i].sorttable_sortfunction = sorttable.guessType(table,i);
}
// make it clickable to sort
headrow[i].sorttable_columnindex = i;
headrow[i].sorttable_tbody = table.tBodies[0];
dean_addEvent(headrow[i],"click", sorttable.innerSortFunction = function(e) {
if (this.className.search(/\bsorttable_sorted\b/) != -1) {
// if we're already sorted by this column, just
// reverse the table, which is quicker
sorttable.reverse(this.sorttable_tbody);
this.className = this.className.replace('sorttable_sorted',
'sorttable_sorted_reverse');
this.removeChild(document.getElementById('sorttable_sortfwdind'));
sortrevind = document.createElement('span');
sortrevind.id = "sorttable_sortrevind";
sortrevind.innerHTML = stIsIE ? ' <font face="webdings">5</font>' : ' ▴';
this.appendChild(sortrevind);
return;
}
if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) {
// if we're already sorted by this column in reverse, just
// re-reverse the table, which is quicker
sorttable.reverse(this.sorttable_tbody);
this.className = this.className.replace('sorttable_sorted_reverse',
'sorttable_sorted');
this.removeChild(document.getElementById('sorttable_sortrevind'));
sortfwdind = document.createElement('span');
sortfwdind.id = "sorttable_sortfwdind";
sortfwdind.innerHTML = stIsIE ? ' <font face="webdings">6</font>' : ' ▾';
this.appendChild(sortfwdind);
return;
}
// remove sorttable_sorted classes
theadrow = this.parentNode;
forEach(theadrow.childNodes, function(cell) {
if (cell.nodeType == 1) { // an element
cell.className = cell.className.replace('sorttable_sorted_reverse','');
cell.className = cell.className.replace('sorttable_sorted','');
}
});
sortfwdind = document.getElementById('sorttable_sortfwdind');
if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); }
sortrevind = document.getElementById('sorttable_sortrevind');
if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); }
this.className += ' sorttable_sorted';
sortfwdind = document.createElement('span');
sortfwdind.id = "sorttable_sortfwdind";
sortfwdind.innerHTML = stIsIE ? ' <font face="webdings">6</font>' : ' ▾';
this.appendChild(sortfwdind);
// build an array to sort. This is a Schwartzian transform thing,
// i.e., we "decorate" each row with the actual sort key,
// sort based on the sort keys, and then put the rows back in order
// which is a lot faster because you only do getInnerText once per row
row_array = [];
col = this.sorttable_columnindex;
rows = this.sorttable_tbody.rows;
for (var j=0; j<rows.length; j++) {
row_array[row_array.length] = [sorttable.getInnerText(rows[j].cells[col]), rows[j]];
}
/* If you want a stable sort, uncomment the following line */
//sorttable.shaker_sort(row_array, this.sorttable_sortfunction);
/* and comment out this one */
row_array.sort(this.sorttable_sortfunction);
tb = this.sorttable_tbody;
for (var j=0; j<row_array.length; j++) {
tb.appendChild(row_array[j][1]);
}
delete row_array;
});
}
}
},
guessType: function(table, column) {
// guess the type of a column based on its first non-blank row
sortfn = sorttable.sort_alpha;
for (var i=0; i<table.tBodies[0].rows.length; i++) {
text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);
if (text != '') {
if (text.match(/^-?[£$¤]?[\d,.]+%?$/)) {
return sorttable.sort_numeric;
}
// check for a date: dd/mm/yyyy or dd/mm/yy
// can have / or . or - as separator
// can be mm/dd as well
possdate = text.match(sorttable.DATE_RE)
if (possdate) {
// looks like a date
first = parseInt(possdate[1]);
second = parseInt(possdate[2]);
if (first > 12) {
// definitely dd/mm
return sorttable.sort_ddmm;
} else if (second > 12) {
return sorttable.sort_mmdd;
} else {
// looks like a date, but we can't tell which, so assume
// that it's dd/mm (English imperialism!) and keep looking
sortfn = sorttable.sort_ddmm;
}
}
}
}
return sortfn;
},
getInnerText: function(node) {
// gets the text we want to use for sorting for a cell.
// strips leading and trailing whitespace.
// this is *not* a generic getInnerText function; it's special to sorttable.
// for example, you can override the cell text with a customkey attribute.
// it also gets .value for <input> fields.
if (!node) return "";
hasInputs = (typeof node.getElementsByTagName == 'function') &&
node.getElementsByTagName('input').length;
if (node.getAttribute("sorttable_customkey") != null) {
return node.getAttribute("sorttable_customkey");
}
else if (typeof node.textContent != 'undefined' && !hasInputs) {
return node.textContent.replace(/^\s+|\s+$/g, '');
}
else if (typeof node.innerText != 'undefined' && !hasInputs) {
return node.innerText.replace(/^\s+|\s+$/g, '');
}
else if (typeof node.text != 'undefined' && !hasInputs) {
return node.text.replace(/^\s+|\s+$/g, '');
}
else {
switch (node.nodeType) {
case 3:
if (node.nodeName.toLowerCase() == 'input') {
return node.value.replace(/^\s+|\s+$/g, '');
}
case 4:
return node.nodeValue.replace(/^\s+|\s+$/g, '');
break;
case 1:
case 11:
var innerText = '';
for (var i = 0; i < node.childNodes.length; i++) {
innerText += sorttable.getInnerText(node.childNodes[i]);
}
return innerText.replace(/^\s+|\s+$/g, '');
break;
default:
return '';
}
}
},
reverse: function(tbody) {
// reverse the rows in a tbody
newrows = [];
for (var i=0; i<tbody.rows.length; i++) {
newrows[newrows.length] = tbody.rows[i];
}
for (var i=newrows.length-1; i>=0; i--) {
tbody.appendChild(newrows[i]);
}
delete newrows;
},
/* sort functions
each sort function takes two parameters, a and b
you are comparing a[0] and b[0] */
sort_numeric: function(a,b) {
aa = parseFloat(a[0].replace(/[^0-9.-]/g,''));
if (isNaN(aa)) aa = 0;
bb = parseFloat(b[0].replace(/[^0-9.-]/g,''));
if (isNaN(bb)) bb = 0;
return aa-bb;
},
sort_alpha: function(a,b) {
if (a[0].toLowerCase()==b[0].toLowerCase()) return 0;
if (a[0].toLowerCase()<b[0].toLowerCase()) return -1;
return 1;
},
sort_ddmm: function(a,b) {
mtch = a[0].match(sorttable.DATE_RE);
y = mtch[3]; m = mtch[2]; d = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt1 = y+m+d;
mtch = b[0].match(sorttable.DATE_RE);
y = mtch[3]; m = mtch[2]; d = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt2 = y+m+d;
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
},
sort_mmdd: function(a,b) {
mtch = a[0].match(sorttable.DATE_RE);
y = mtch[3]; d = mtch[2]; m = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt1 = y+m+d;
mtch = b[0].match(sorttable.DATE_RE);
y = mtch[3]; d = mtch[2]; m = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt2 = y+m+d;
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
},
shaker_sort: function(list, comp_func) {
// A stable sort function to allow multi-level sorting of data
// see: http://en.wikipedia.org/wiki/Cocktail_sort
// thanks to Joseph Nahmias
var b = 0;
var t = list.length - 1;
var swap = true;
while(swap) {
swap = false;
for(var i = b; i < t; ++i) {
if ( comp_func(list[i], list[i+1]) > 0 ) {
var q = list[i]; list[i] = list[i+1]; list[i+1] = q;
swap = true;
}
} // for
t--;
if (!swap) break;
for(var i = t; i > b; --i) {
if ( comp_func(list[i], list[i-1]) < 0 ) {
var q = list[i]; list[i] = list[i-1]; list[i-1] = q;
swap = true;
}
} // for
b++;
} // while(swap)
}
}
/* ******************************************************************
Supporting functions: bundled here to avoid depending on a library
****************************************************************** */
// Dean Edwards/Matthias Miller/John Resig
/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", sorttable.init, false);
}
/* for Internet Explorer */
/*#cc_on #*/
/*#if (#_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
sorttable.init(); // call the onload handler
}
};
/*#end #*/
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
sorttable.init(); // call the onload handler
}
}, 10);
}
/* for other browsers */
window.onload = sorttable.init;
// written by Dean Edwards, 2005
// with input from Tino Zijdel, Matthias Miller, Diego Perini
// http://dean.edwards.name/weblog/2005/10/add-event/
function dean_addEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = dean_addEvent.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = handleEvent;
}
};
// a counter used to create unique IDs
dean_addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else {
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
};
function handleEvent(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
}
// Dean's forEach: http://dean.edwards.name/base/forEach.js
/*
forEach, version 1.0
Copyright 2006, Dean Edwards
License: http://www.opensource.org/licenses/mit-license.php
*/
// array-like enumeration
if (!Array.forEach) { // mozilla already supports this
Array.forEach = function(array, block, context) {
for (var i = 0; i < array.length; i++) {
block.call(context, array[i], i, array);
}
};
}
// generic enumeration
Function.prototype.forEach = function(object, block, context) {
for (var key in object) {
if (typeof this.prototype[key] == "undefined") {
block.call(context, object[key], key, object);
}
}
};
// character enumeration
String.forEach = function(string, block, context) {
Array.forEach(string.split(""), function(chr, index) {
block.call(context, chr, index, string);
});
};
// globally resolve forEach enumeration
var forEach = function(object, block, context) {
if (object) {
var resolve = Object; // default
if (object instanceof Function) {
// functions have a "length" property
resolve = Function;
} else if (object.forEach instanceof Function) {
// the object implements a custom forEach method so use that
object.forEach(block, context);
return;
} else if (typeof object == "string") {
// the object is a string
resolve = String;
} else if (typeof object.length == "number") {
// the object is array-like
resolve = Array;
}
resolve.forEach(object, block, context);
}
};
div#main { margin-left:1%; margin-right:1%; }
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {content: " \25B4\25BE"}
table.sortable tbody tr:nth-child(2n) td {background: #ffcccc;}
table.sortable tbody tr:nth-child(2n+1) td {background: #ccfffff;}
.sm { font-size:small; }
.text { text-align:center; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RuneScape Quest Checklist</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8">
<script type="text/javascript" src="sorttable.js"></script>
</head>
<body>
<div id="main">
<table class="sortable" border="0" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th class="sorttable_nosort" title="Unsortable" style="width: 55px;"><strong>Done</strong></th>
<th title="Click to sort"><strong>Quest Name</strong></th>
<th title="Click to sort"><strong>Difficulty</strong></th>
<th title="Click to sort"><strong>Length</strong></th>
<th class="sorttable_nosort" title="Unsortable"><strong>Skill Req.</strong></th>
<th class="sorttable_nosort" title="Unsortable"><strong>Quest Req.</strong></th>
<th title="Click to sort"><strong>QP</strong></th>
<th class="sorttable_nosort" title="Unsortable"><strong>Rewards</strong></th>
<th title="Click to sort"><strong>Free/Members</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td class="sm text"><input name="done[1]" value="1" type="checkbox"></td>
<td class="sm text">Quest Name</td>
<td class="sm text"><div style="display: none;">1</div>Novice (to Grandmaster)</td>
<td class="sm text"><div style="display: none;">1</div>Short (to Very Long)</td>
<td class="sm text">Various Skills</td>
<td class="sm text">Various Quests</td>
<td class="sm text">1 (to 3)</td>
<td class="sm">
<ul>
<li>Reward 1</li>
<li>Reward 2</li>
<li>etc...</li>
</ul>
</td>
<td class="sm text">Membership req (or not)</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
try like this example
this link also helpful to you. fixed header of table
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top: 100px;
left: 100px;
width: 800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width: 100%;
}
td + td {
border-left: 1px solid #eee;
}
td,
th {
border-bottom: 1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div {
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>
I have a nice/working solution with jQuery.
Assume your table's class is "fixed_header" then add following code:
CSS:
.fixed_header{position:relative; border-collapse: collapse;}
JavaScript:
var originalHeader;
var floatingHeader;
$(document).ready(function () {
var tableObj=$('.fixed_header'); //or other CSS selector as `#tableId`
var tableBaseTop = tableObj.offset().top;
originalHeader = $('.fixed_header tr:first-child'); //change CSS selector here also
floatingHeader = originalHeader.clone();
floatingHeader
.css('position', 'absolute')
.css('top', 0);
setFloatingHeaderSize();
tableObj.prepend(floatingHeader);
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop > tableBaseTop && windowTop < tableBaseTop + tableObj.height() - 100)
floatingHeader.css('top', windowTop - tableBaseTop);
else floatingHeader.css('top', 0); //floating-header is just on Original-one
});
$(window).resize(setFloatingHeaderSize);
});
function setFloatingHeaderSize() {
var originalThs = originalHeader.find('th');
var floatingThs = floatingHeader.find('th');
for (var i = 0; i < originalThs.length; i++) {
floatingThs.eq(i)
.css('width', originalThs.eq(i).width())
.css('height', originalThs.eq(i).height());
}
}
Best part of it, you don't need to change anything in you HTML, it'll directly work on any TABLE, just replace class-name(OR any other css-selector to that table) of table in which header should be fixed.
Concept: It creates a clone header(first row) and display above original one. We set the listener-function for window-scroll event AND when table-scrolled to TOP-of-Window then original one goes-up and clone one remains at top, coz we set it's margin-top to scrolled height. See at this line: if (windowTop > tableBaseTop && windowTop < tableBaseTop + tableObj.height() - 100).
Trick For Your Case: For your clickable feature on clone header, I would rather suggest you to apply your event listener on cloned-header, after cloning header(after following line): tableObj.prepend(floatingHeader);. Coz, cloned-header will be one top always, when user will click on any column-head, the event will we actually captured by cloned-header.
If your events are automatically set by any script(means not in your control), then either try putting(running) that script after above(my-js) OR apply click-event-listener on cloned-header's column for original-one, so that if anybody click then original's click event will also fire.
Code-ex:
function simulateClickOnOriginal() {
var originalThs = originalHeader.find('th');
var floatingThs = floatingHeader.find('th');
for (var i = 0; i < floatingThs.length; i++) {
floatingThs.eq(i).click(function(){
originalThs.eq(i).trigger( "click" );
});
}
}
Hi there,
I created an HTML table and what I need is to find the column index of a particular value,
but I don't know how to access each value of a table. That is why I am unable to get the index of the column.
Here is my table.
<table>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
</tr>
<tr>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>07</td>
<td>08</td>
<td>09</td>
</tr>
</table>
and I want the index of the value 03.
The following is a working code, first traverse the table to get the values in this, then compare with your required value and find the index of it..,
<html>
<head>
<script>
function cellvalues() {
var table = document.getElementById('mytable');
for (var r = 0, n = table.rows.length; r < n; r++) {
for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
var hi=table.rows[r].cells[c].innerHTML;
if(hi==03)
{
alert(table.rows[r].cells[c].cellIndex);
}
}
}
}
</script>
</head>
<body>
<table id="mytable">
<tr><td>01</td><td>02</td><td>03</td>
</tr>
<tr><td>04</td><td>05</td><td>06</td>
</tr>
<tr><td>07</td><td>08</td><td>09</td>
</tr>
</table>
<input type="button" onclick=cellvalues()>
</body>
</html>
You can try this (untested)
var tab = document.getElementsByTagName("table")[0];
var tr = tab.childNodes;
for (var i = 0; i < tr.length; i++) {
var td = tr[i].childNodes;
for (var j = 0; j < tr.length; j++) {
if (td[j].innerHTML == "03") {
alert(i + "," + j);
}
}
}
I suggest using jQuery index for this:
var trCollection = $('table tr');
$('table td').each(function () {
console.log(trCollection.index($(this).parent()));
});