I want to convert powershell output into HTML format with the search option.
I have HTML with jscript/css which i am trying to add into HTML style in my Powershell code.
The search option is not searching data in page.
HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
I want this html format table to get output of command
Get-service.
$services = Get-Service
$FullHTML = $services | select Name,StartType -First 5 | ConvertTo-Html -Fragment
Here's one way to do it:
Replace the entire <table>...</table> section in your HTML with "$table" (no quotes)
Save the code to a text file, say, template.txt
Then you can run the following to produce a searchable HTML page:
$template = Get-Content ".\template.txt" -Raw
$table = (Get-Service | select Name,StartType | ConvertTo-Html -Fragment).Replace('<table>', '<table id="myTable">')
$template.Replace("`$table", $table) | Out-File .\Services.html
Related
I am from Java background, learning Python. Please review my code and guide me to learn Python properly.
This is a sample code to perform all CRUD operation. i need some advice on my code right here, i dont know what the error and im not quite sure if this code is correct or not. this is the html and below is app.py
{% extends 'layout.html' %}
{% block body %}
<style type="text/css">
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 1300px;
margin: 30px auto;
background: #fff;
padding: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
.table-title .add-new {
float: right;
height: 30px;
font-weight: bold;
font-size: 12px;
text-shadow: none;
min-width: 100px;
border-radius: 50px;
line-height: 13px;
}
.table-title .add-new i {
margin-right: 4px;
}
table.table {
table-layout: fixed;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
</style>
<script type="text/javascript">
// Delete row on delete button click
$(document).on("click", ".delete", function(){
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
var id = $(this).attr("id");
var string = id;
$.post("/ajax_delete", { string: string}, function(data) {
$("#displaymessage").html(data);
$("#displaymessage").show();
});
});
// update rec row on edit button click
$(document).on("click", ".update", function(){
var id = $(this).attr("id");
var string = id;
var txtname = $("#txtname").val();
var txtdepartment = $("#txtdepartment").val();
var txtphone = $("#txtphone").val();
var txtname = $("#txtname").val();
var txtdepartment = $("#txtdepartment").val();
var txtphone = $("#txtphone").val();
var txtname = $("#txtname").val();
var txtdepartment = $("#txtdepartment").val();
var txtphone = $("#txtphone").val();
var txtname = $("#txtname").val();
var txtdepartment = $("#txtdepartment").val();
$.post("/ajax_update", { string: string,txtname: txtname, txtdepartment: txtdepartment, txtphone: txtphone}, function(data) {
$("#displaymessage").html(data);
$("#displaymessage").show();
});
});
// Edit row on edit button click
$(document).on("click", ".edit", function(){
$(this).parents("tr").find("td:not(:last-child)").each(function(i){
if (i=='0'){
var idname = 'txtname';
}else if (i=='1'){
var idname = 'txtdepartment';
}else if (i=='2'){
var idname = 'txtphone';
}else{}
$(this).html('<input type="text" name="updaterec" id="' + idname + '" class="form-control" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
$(this).parents("tr").find(".add").removeClass("add").addClass("update");
});
});
</script>
</head>
<body>
<div class="container">
<br>
<br>
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-8"><h2>Student <b>Details</b></h2></div>
<div class="col-sm-2">
<button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button>
</div>
<div class='btn btn-info' id="displaymessage" style="display:none;width:100%;margin-top:10px;"></div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Student Name</th>
<th>Student ID</th>
<th>Faculty</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Postcode</th>
<th>Vehicle Type</th>
<th>Vehicle Brand</th>
<th>Vehicle Number Plate</th>
<th>Vehicle Image</th>
</tr>
</thead>
<tbody>
{% for row in student %}
<tr>
<td>{{row.studentname}}</td>
<td>{{row.studentid}}</td>
<td>{{row.faculty}}</td>
<td>{{row.address}}</td>
<td>{{row.city}}</td>
<td>{{row.state}}</td>
<td>{{row.postcode}}</td>
<td>{{row.vtype}}</td>
<td>{{row.vbrand}}</td>
<td>{{row.studnumplate}}</td>
<td>{{row.image}}</td>
<td>
<a class="add" title="Add" data-toggle="tooltip" id="{{row.id}}"><i class="fa fa-user-plus"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip" id="{{row.id}}"><i class="fa fa-pencil"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip" id="{{row.id}}"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</body>
</html>
i already try youtube and google but i dont quite understand how to make this crud working
#app.route("/pythonlogin/editstud",methods=["POST","GET"])
def editstud():
msg = ''
if request.method == 'POST':
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute('SELECT * FROM registerstud ORDER BY id')
studentname = cursor.fetchall()
if request.method == 'POST':
string = request.form['string']
studentname = request.form['studentname']
studentid = request.form['studentid']
faculty = request.form['faculty']
address = request.form['address']
city = request.form['city']
state = request.form['state']
postcode = request.form['postcode']
vtype = request.form['vtype']
vbrand = request.form['vbrand']
studnumplate = request.form['studnumplate']
image = request.form['image']
print(string)
cursor.execute("UPDATE registerstud SET studentname = %s, studentid = %s, faculty = %s, address = %s, city = %s, faculty = %s, state = %s, postcode = %s, vtype = %s, vbrand = %s, studnumplate = %s, image = %s WHERE id = %s ", [studentname, studentid, faculty, address, city, state, postcode, vtype, vbrand, studnumplate, image])
mysql.connection.commit()
cursor.close()
msg = 'Record successfully Updated'
return jsonify(msg)
return render_template('editstud.html', msg=msg)
I have a csv file that I load into an 11 column html table. The data displays as expected except there is a very narrow column on the far right. There is also an extra blank row at the bottom. I have made dozens of adjustments to the width percentages but the little column on the right prevails. I haven't tried to eliminate the extra row on the bottom because I don't know what to try. See CSS code.
<title>CSV to HTML5</title>
<style type="text/css">
table {
width: 850px;
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: center;
padding: 6px;
border: 1px solid black;
border-collapse: collapse;
}
tr {
height: 24px;
border: 1px solid black;
}
tr:nth-child(even) {
background-color: #00FFFF;
}
td {
font-family: Arial, Verdana;
font-size: 0.8em;
font-weight: 700;
}
td {
border: 1px solid black;
cellpadding: 3px;
}
td:nth-child(1) {
width: 4%;
text-align: center;
}
td:nth-child(2) {
width: 6%;
text-align: left;
padding-left: 5px;
}
td:nth-child(3) {
width: 14%;
text-align: left;
padding-left: 5px;
}
td:nth-child(4) {
width: 14%;
text-align: left;
padding-left: 5px;
}
td:nth-child(5) {
width: 18%;
text-align: left;
padding-left: 5px;
}
td:nth-child(6) {
width: 6%;
padding-left: 5px;
}
td:nth-child(7) {
width: 5%;
text-align: center;
}
td:nth-child(8) {
width:8%;
text-align: center;
}
td:nth-child(9) {
width: 8%;
text-align: center;
}
td:nth-child(10) {
width: 8%;
text-align: center;
}
td:nth-child(11) {
width:8%;
text-align: center;
</style>
</head>
<body>
<div>
<div>
<legend>
<h1 id="clubname" style="text-align:center"></h1>
<h2 id="racename" style="text-align:center"></h2>
<h3 id="racedate" style="text-align:center"></h3>
</legend>
</div>
<div id="output">
</div>
<div id="myDiv" class="container">
<hr>
<form>
<div class="form-group">
<input type="text" class="form-control" id="inp_clubname" placeholder="Club Name" size="24" required>
<input type="text" class="form-control" id="inp_racename" placeholder="Race Name" size="24" required>
<input type="date" class="form-control" id="inp_racedate" placeholder="Date Name" size="24" required>
<label for="csvFileInput">CSV File: </label>
<input type="file" id="csvFileInput" onchange=accept=".csv" size="35" required>
<input type="button" class="btn btn-primary" onclick="generate()" value="Generate" />
</div>
</form>
<hr>
</div>
</div>
<footer>
<p style="text-align:center">©: Klexy Soft</p>
</footer>
<script type="text/javascript">
function generate() {
console.log('generate called')
//copy text from form to headings
ids = ["clubname", "racename", "racedate"]
for (i in ids) {
value = document.getElementById('inp_' + ids[i]).value
document.getElementById(ids[i]).innerHTML = value
}
files = document.getElementById('csvFileInput').files
// Check for the various File API support.
if (window.FileReader) {
// FileReader are supported.
var reader = new FileReader();
// Read file into memory as UTF-8
reader.readAsText(files[0]);
// Handle errors load
reader.onload = loadHandler;
reader.onerror = errorHandler;
} else {
alert('FileReader is not supported in this browser.');
}
}
function loadHandler(event) {
var csv = event.target.result;
processData(csv);
}
function processData(csv) {
var allTextLines = csv.split(/\r\n|\n/);
var lines = [];
for (var i = 0; i < allTextLines.length; i++) {
var data = allTextLines[i].split(',');
lines.push(data);
}
//console.log(lines);
drawOutput(lines);
}
function errorHandler(evt) {
if (evt.target.error.name == "NotReadableError") {
alert("Canno't read file !");
}
}
function drawOutput(lines) {
//Clear previous data
document.getElementById("output").innerHTML = "";
var table = document.createElement("table");
for (var i = 0; i < lines.length; i++) {
var row = document.createElement("TR");
table.appendChild(row)
for (var j = 0; j < lines[i].length; j++) {
// first row is header
cell = document.createElement(i == 0 ? "TH" : "TD");
row.appendChild(cell)
cell.appendChild(document.createTextNode(lines[i][j]));
}
}
document.getElementById("output").appendChild(table);
document.getElementById("myDiv").style.visibility = "hidden";
}
console.log('initialized')
</script>
</body>
csv file
PL,Sail#,Yacht,Type,Skipper,Club,Rtg,Finish,Elapsed,Cor'ted, 1st +,
1,1234,Boat Name,42MkII,Name,GYC,115,14:10:53,02:00:53,01:46:42,00:00:00,
2,1234,Boat Name,4000,Name,GYC,107,14:16:29,02:06:29,01:53:17,00:06:35,
3,1234,Boat Name,Catalina36MKII,Name,GYC,144,14:26:34,02:16:34,01:58:48,00:12:06,
4,1234,Boat Name,42,Name,GYC,131,14:26:37,02:16:37,02:00:28,00:13:46,
5,1234,Boat Name,Mark3,Name,GYC,218,14:52:01,02:42:01,02:15:08,00:28:26,
6,1234,Boat Name,Nonsuch 30C,Name,GYC,156,14:54:43,02:44:43,02:25:29,00:38:47,
7,1234,Boat Name,KP44,Name,GYC,168,15:25:50,03:15:50,02:55:07,01:08:25,
One of the problems I was having was the java script, function drawOutput(lines) { and the codes that perform the function, generates the table and adds an extra blank row at the bottom, I guess waiting for another line of data. By adding one more line to the java script function code, the very last line, I was able to remove the extra empty row.
document.getElementById("output").appendChild(table).deleteRow(-1);
I have a table:- HTML Code
<div class="table-scroll">
<table class="my-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>firstName</th>
<th>lastName</th>
<th>age</th>
<th>email</th>
<th>balance</th>
<th>Mode</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection" ng-class-even="'striped'">
<td>{{row.Row1}}-{{row.Row2}}</td>
<td>{{row.Row3 != null ? row.Row3 : " "}}</td>
<td><div class="width">{{row.Row4 != null ? row.Row4 : " "}}</div></td>
<td>{{row.Row5 != null ? (row.Row2 >= "50"? row.Row5 : (row.Row5 | date:'dd-MMM-yyyy')) : " "}}</td>
<td>{{row.Row2}}</td>
<td>{{row.Row5}}</td>
</tr>
</tbody>
</table>
</div>
CSS Code:-
.table-scroll {
overflow-x: scroll;
overflow-y:hidden;
height:60vh;}
.width{
width:50%;
}
.my-table {
width: 100%; }
.my-table tbody tr {
outline: none; }
.my-table tbody, thead {
display: block; }
.my-table tbody{
overflow-y:scroll;
max-height:50vh;
}
.my-table td {
min-width: 90px;
font-size: .7em;
padding: 6px;
text-align: center;
border-bottom: 1px solid #ddd; }
.my-table th {
min-width: 90px;
background-color: #58595b;
font-size: .7em;
color: #ddd;
padding: 6px;
border-bottom: 1px solid #777;
font-weight: bold;
border-right: 1px solid #333;
border-left: 1px solid #777;
text-align: center; }
.striped {
background-color: #eeeff1; }
JS Code:-
angular.module('myApp', ['smart-table','lrDragNDrop'])
.controller('mainCtrl', ['$scope', '$timeout',
function ($scope, $timeout) {
var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'];
var familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
$scope.isLoading = false;
$scope.rowCollection = [];
function createRandomItem() {
var
firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '#whatever.com',
balance = Math.random() * 3000;
return {
Row1: firstName,
Row2: lastName,
Row3: age,
Row4: email,
Row5: balance
};
}
$scope.columns=['Row1','Row2','Row3','Row4','Row5'];
for(var i=0;i<50;i++){
$scope.rowCollection.push(createRandomItem());
}
}
]);
https://plnkr.co/edit/YCXMSjAQ4VVSyvVFNLoI?p=preview
Here I am trying to fix the column headers and applying the vertical scroll to my tbody.
But the scroll appears at the very end when user scrolls through the horizontal scroll. I am trying to fix the position of vertical scroll but it changes my table look. Also, to achieve above I used display:block to tbody and thead but that ruins the alignment of columns. Can anybody please help me fixing the above issue.
.my-table tbody, thead {display: inline-block; }
.my-table th {min-width:92px;}
Just trying to filter a table but also have it filter the number with and without dashes (working) but also search the name and id as well. Its only searching the one column since the index is [0].
How would I have it search all 3 columns? So if I search number or id or name it would filter. Here is the working code I have so far to search number.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Number search</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Number</th>
<th style="width:60%;">Name</th>
<th style="width:60%;">ID</th>
</tr>
<tr>
<td>905-373-3333</td>
<td>Mike</td>
<td>4563</td>
</tr>
<tr>
<td>905-333-3333</td>
<td>adam</td>
<td>8963</td>
</tr>
<tr>
<td>416-373-3432</td>
<td>Jim</td>
<td>9363</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, cleanedFilter;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
cleanedFilter = filter.replace("-","");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
cellContent = td.innerHTML.toUpperCase().replace(/-/g,"");
if (cellContent.indexOf(cleanedFilter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
If you want to use a filter for every td available in your rows, you can use the following:
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
<section class="container">
<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">
<table class="order-table table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Number 2</th>
<th>Number 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column One</td>
<td>Two</td>
<td>352353</td>
<td>1</td>
</tr>
<tr>
<td>Column Two</td>
<td>Two</td>
<td>4646</td>
<td>2</td>
</tr>
</tbody>
</table>
</section>
Could someone help with this
http://jsfiddle.net/smilepak/8qRQB/4/
<div>
<table>
<tr>
<td class="headcol">Fiddle Options</td>
<td class="long">Created and maintained by Piotr and Oskar. Hosted by DigitalOcean. Special thanks to MooTools community.</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">Legal, Credits and Links</td>
<td class="long" style="width:300px">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long" style="width:300px">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">Ajax Requests</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
table {
border-collapse:separate;
border-top: 1px solid grey;
}
td {
margin:0;
border:1px solid grey;
border-top-width:0px;
}
div {
width: 600px;
overflow-x:scroll;
margin-left:10em;
overflow-y:visible;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:10em;
left:0;
top:auto;
border-right: 1px none black;
border-top-width:1px;
/*only relevant for first row*/
margin-top:-3px;
/*compensate for top border*/
}
In firefox, the row border doesn't seem to line up. I want a table where the first column is frozen while the rest is scrollable. All rows are linked up to a single scroll bar so i can use in a loop via Razor view in MVC.
Thanks,
JSBIN: http://jsbin.com/IwisANaX/3/edit
CSS
...
.freeze td:nth-child(1),
.freeze th:nth-child(1) {
background: #ddd;
position: absolute;
width: 20px;
left: 0;
}
.freeze .bottomScroll {
overflow-x: hidden;
margin-left: 20px;
}
...
JS
var ns = $('.newScroll', table),
bs = $('.bottomScroll', table);
ns.scroll(function(){bs.scrollLeft(ns.scrollLeft());});
try using
.headcol {max-width: 10em}
also note that using
.headcol {position: absolute}
makes the cell not to align relatively to the document; that´s why it looks like that
I used this combination of JavaScript and CSS to solve the sticky column issue.
https://jsfiddle.net/5poxyje4/
JS (Commented Section has boostrap compatible code)
var $table = $('.table');
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
$fixedColumn.find('th:not(:first-child),td:not(:first-child),.excludeHeader').remove();
$fixedColumn.find('tr').each(function (i, elem) {
if(elem.rowSpan = "1"){
$(this).height($table.find('tr:eq(' + i + ')').height());
}
else{
for (x = i; x <= parseInt(elem.rowSpan); x++) {
var tempHeight = $(this).height() + $table.find('tr:eq(' + x + ')').height();
$(this).height(tempHeight);
}
}
});
//Comments for if you are using bootrap tables
//var $table = $('.table');
//var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
//$fixedColumn.find('th:not(:first-child),td:not(:first-child),.excludeHeader').remove();
//$fixedColumn.find('tr').each(function (i, elem) {
// $fixedColumn.find('tr:eq(' + i + ') > th:first-child,tr:eq(' + i + ') > td:first-child').each(function (c, cell) {
// if (cell.rowSpan == "1") {
// $(this).height($table.find('tr:eq(' + i + '),tr:not(.excludeRow)').height());
// }
// else {
// for (x = 1; x < parseInt(cell.rowSpan) ; x++) {
// var tempHeight = $(this).height() + $table.find('tr:eq(' + x + ')').height();
// $(this).height(tempHeight);
// }
// }
// $(this).width($table.find('.stickyColumn').first().width());
// });
//});
CSS(Commented section has bootstrap compatible code in my Site.css)
.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
/* used z-index with bootstrap */
/*z-index: 9999;*/
}
/*This media query conflicted with my bootstrap container. I did not use it*/
#media(min-width:768px) {
.table-responsive>.fixed-column {
display: none;
}
}
/*Commented Section for if you are using bootstrap*/
/*.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
background-color:#ffffff;
}*/
This accounts for if a th or a td has a rowspan greater than 1 as well.