a sortable table fixing - javascript

When I change their rankings, I want their id to remain constant.
When I wanted to make Banana the first. And the one I'm dragging, Banana, is automatically 1., Apple 2. Organge 3. it will be. So I want the table numbers to remain constant.
how do I do that
$(function () {
$("#sortable tbody")
.sortable({
cursor: "move",
placeholder: "sortable-placeholder",
helper: function (e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function (index) {
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).width());
});
return $helper;
}
})
.disableSelection();
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
font-family : "Open Sans", sans-serif;
}
.responsive-table {
overflow : auto;
}
table {
width : 100%;
border-spacing : 0;
border-collapse : collapse;
white-space : nowrap;
}
table th {
background : #bdbdbd;
}
table tr:nth-child(odd) {
background-color : #f2f2f2;
}
table tr:nth-child(even) {
background-color : #e6e6e6;
}
th,
tr,
td {
text-align : center;
border : 1px solid #e0e0e0;
padding : 5px;
}
img {
font-style : italic;
font-size : 11px;
}
.fa-bars {
cursor : move;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="responsive-table">
<table id="sortable">
<tr class="ui-state-default">
<th>Drag Row</th>
<th>Id</th>
<th>Fruit</th>
<th>Quantity</th>
<th>Image</th>
</tr>
<tr>
<td><i class="fa fa-bars"></i></td>
<td data-id="1">1</td>
<td>Apple</td>
<td>5</td>
<td><img src="" alt="noImage" width="30px" height="25px"></td>
</tr>
<tr>
<td><i class="fa fa-bars"></i></td>
<td data-id="2">2</td>
<td>Orange</td>
<td>8</td>
<td><img src="" alt="noImage" width="30px" height="25px"></td>
</tr>
<tr>
<td><i class="fa fa-bars"></i></td>
<td data-role="test" data-id="3">3</td>
<td>Banana</td>
<td>3</td>
<td><img src="" alt="noImage" width="30px" height="25px"></td>
</tr>
</table>
</div>
CODEPEN LİNK: https://codepen.io/orist/pen/bVmzoK
When I change their rankings, I want their id to remain constant.

Related

how to make page break after one page for big table in html pdf IOS device(react native)?

i am new in react native and trying to generate pdf for a html table.
but the table is not coming as expected in ios device, for android it's working smoot as i expected.
i want to make a page break and every page will be header for the table.
if the page break automatically, it's fine otherwise choose 10/12 rows in a page and break then rest of will display other page.
why it's not working for ios. any one can help me for ios device.
here is my codes example:
import React, { useCallback, useState, useEffect } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
Image,
ImageBackground,
ActivityIndicator,
ScrollView,
TouchableOpacity
} from 'react-native';
import { printToFileAsync } from 'expo-print';
import { shareAsync } from 'expo-sharing';
const Task2TableOrg = ({ navigation }) => {
const html = `
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page{
size: A4 landscape;
margin-top:0px;
margin-bottom:0px;
margin-left:10px;
margin-right:10px;
}
.demo {
border:1px solid #C0C0C0;
border-collapse:collapse;
padding:5px;
page-break-inside:auto;
margin-buttom:300px;
table-layout:fixed;
}
.demo tr{
border:2px solid #C0C0C0;
padding:5px;
page-break-inside:avoid;
page-break-after:auto;
}
.demo th {
border:2px solid #C0C0C0;
padding:5px;
background:#F0F0F0;
}
.demo td {
border:2px solid #C0C0C0;
padding:5px;
text-align: center;
}
.images {
text-align: center;
}
body{
padding-top: 30px;
padding-bottom: 60px;
}
.footers {
position: fixed;
bottom: 0;
width: 100%;
color: black;
z-index: 9999;
font-style: italic;
font-weight: bold;
text-align: center;
background-color: #ffffff;
}
pagging {
text-align: left;
counter-reset: page;
}
pagees::before{
counter-increment: page;
content: "Page " counter(page);
text-align:left;
}
</style>
</head>
<body>
<table class="demo">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head5</th>
<th>head6</th>
<th>head7</th>
<th>head8</th>
<th>head9</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell1_1</td>
<td>cell2_1</td>
<td>cell3_1</td>
<td>cell4_1</td>
<td>cell5_1</td>
<td>cell6_1</td>
<td>cell7_1</td>
<td>cell8_1</td>
<td>cell9_1</td>
</tr>
<tr>
<td>cell1_2</td>
<td>cell2_2</td>
<td>cell3_2</td>
<td>cell4_2</td>
<td>cell5_2</td>
<td>cell6_2</td>
<td>cell7_2</td>
<td>cell8_2</td>
<td>cell9_2</td>
</tr>
<tr>
<td>cell1_3</td>
<td>cell2_3</td>
<td>cell3_3</td>
<td>cell4_3</td>
<td>cell5_3</td>
<td>cell6_3</td>
<td>cell7_3</td>
<td>cell8_3</td>
<td>cell9_3</td>
</tr>
<tr>
<td>cell1_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
<td>cell5_4</td>
<td>cell6_4</td>
<td>cell7_4</td>
<td>cell8_4</td>
<td>cell9_4</td>
</tr>
<tr>
<td>cell1_5</td>
<td>cell2_5</td>
<td>cell3_5</td>
<td>cell4_5</td>
<td>cell5_5</td>
<td>cell6_5</td>
<td>cell7_5</td>
<td>cell8_5</td>
<td>cell9_5</td>
</tr>
<tr>
<td>cell1_6</td>
<td>cell2_6</td>
<td>cell3_6</td>
<td>cell4_6</td>
<td>cell5_6</td>
<td>cell6_6</td>
<td>cell7_6</td>
<td>cell8_6</td>
<td>cell9_6</td>
</tr>
<tr>
<td>cell1_7</td>
<td>cell2_7</td>
<td>cell3_7</td>
<td>cell4_7</td>
<td>cell5_7</td>
<td>cell6_7</td>
<td>cell7_7</td>
<td>cell8_7</td>
<td>cell9_7</td>
</tr>
<tr>
<td>cell1_8</td>
<td>cell2_8</td>
<td>cell3_8</td>
<td>cell4_8</td>
<td>cell5_8</td>
<td>cell6_8</td>
<td>cell7_8</td>
<td>cell8_8</td>
<td>cell9_8</td>
</tr>
<tr>
<td>cell1_9</td>
<td>cell2_9</td>
<td>cell3_9</td>
<td>cell4_9</td>
<td>cell5_9</td>
<td>cell6_9</td>
<td>cell7_9</td>
<td>cell8_9</td>
<td>cell9_9</td>
</tr>
<tr>
<td>cell1_10</td>
<td>cell2_10</td>
<td>cell3_10</td>
<td>cell4_10</td>
<td>cell5_10</td>
<td>cell6_10</td>
<td>cell7_10</td>
<td>cell8_10</td>
<td>cell9_10</td>
</tr>
<tr>
<td>cell1_11</td>
<td>cell2_11</td>
<td>cell3_11</td>
<td>cell4_11</td>
<td>cell5_11</td>
<td>cell6_11</td>
<td>cell7_11</td>
<td>cell8_11</td>
<td>cell9_11</td>
</tr>
<tr>
<td>cell1_12</td>
<td>cell2_12</td>
<td>cell3_12</td>
<td>cell4_12</td>
<td>cell5_12</td>
<td>cell6_12</td>
<td>cell7_12</td>
<td>cell8_12</td>
<td>cell9_12</td>
</tr>
<tr>
<td>cell1_1</td>
<td>cell2_1</td>
<td>cell3_1</td>
<td>cell4_1</td>
<td>cell5_1</td>
<td>cell6_1</td>
<td>cell7_1</td>
<td>cell8_1</td>
<td>cell9_1</td>
</tr>
<tr>
<td>cell1_2</td>
<td>cell2_2</td>
<td>cell3_2</td>
<td>cell4_2</td>
<td>cell5_2</td>
<td>cell6_2</td>
<td>cell7_2</td>
<td>cell8_2</td>
<td>cell9_2</td>
</tr>
<tr>
<td>cell1_3</td>
<td>cell2_3</td>
<td>cell3_3</td>
<td>cell4_3</td>
<td>cell5_3</td>
<td>cell6_3</td>
<td>cell7_3</td>
<td>cell8_3</td>
<td>cell9_3</td>
</tr>
<tr>
<td>cell1_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
<td>cell5_4</td>
<td>cell6_4</td>
<td>cell7_4</td>
<td>cell8_4</td>
<td>cell9_4</td>
</tr>
<tr>
<td>cell1_5</td>
<td>cell2_5</td>
<td>cell3_5</td>
<td>cell4_5</td>
<td>cell5_5</td>
<td>cell6_5</td>
<td>cell7_5</td>
<td>cell8_5</td>
<td>cell9_5</td>
</tr>
<tr>
<td>cell1_6</td>
<td>cell2_6</td>
<td>cell3_6</td>
<td>cell4_6</td>
<td>cell5_6</td>
<td>cell6_6</td>
<td>cell7_6</td>
<td>cell8_6</td>
<td>cell9_6</td>
</tr>
<tr>
<td>cell1_7</td>
<td>cell2_7</td>
<td>cell3_7</td>
<td>cell4_7</td>
<td>cell5_7</td>
<td>cell6_7</td>
<td>cell7_7</td>
<td>cell8_7</td>
<td>cell9_7</td>
</tr>
<tr>
<td>cell1_8</td>
<td>cell2_8</td>
<td>cell3_8</td>
<td>cell4_8</td>
<td>cell5_8</td>
<td>cell6_8</td>
<td>cell7_8</td>
<td>cell8_8</td>
<td>cell9_8</td>
</tr>
<tr>
<td>cell1_9</td>
<td>cell2_9</td>
<td>cell3_9</td>
<td>cell4_9</td>
<td>cell5_9</td>
<td>cell6_9</td>
<td>cell7_9</td>
<td>cell8_9</td>
<td>cell9_9</td>
</tr>
<tr>
<td>cell1_10</td>
<td>cell2_10</td>
<td>cell3_10</td>
<td>cell4_10</td>
<td>cell5_10</td>
<td>cell6_10</td>
<td>cell7_10</td>
<td>cell8_10</td>
<td>cell9_10</td>
</tr>
<tr>
<td>cell1_11</td>
<td>cell2_11</td>
<td>cell3_11</td>
<td>cell4_11</td>
<td>cell5_11</td>
<td>cell6_11</td>
<td>cell7_11</td>
<td>cell8_11</td>
<td>cell9_11</td>
</tr>
<tr>
<td>cell1_12</td>
<td>cell2_12</td>
<td>cell3_12</td>
<td>cell4_12</td>
<td>cell5_12</td>
<td>cell6_12</td>
<td>cell7_12</td>
<td>cell8_12</td>
<td>cell9_12</td>
</tr>
<tr>
<td>cell1_1</td>
<td>cell2_1</td>
<td>cell3_1</td>
<td>cell4_1</td>
<td>cell5_1</td>
<td>cell6_1</td>
<td>cell7_1</td>
<td>cell8_1</td>
<td>cell9_1</td>
</tr>
<tr>
<td>cell1_2</td>
<td>cell2_2</td>
<td>cell3_2</td>
<td>cell4_2</td>
<td>cell5_2</td>
<td>cell6_2</td>
<td>cell7_2</td>
<td>cell8_2</td>
<td>cell9_2</td>
</tr>
<tr>
<td>cell1_3</td>
<td>cell2_3</td>
<td>cell3_3</td>
<td>cell4_3</td>
<td>cell5_3</td>
<td>cell6_3</td>
<td>cell7_3</td>
<td>cell8_3</td>
<td>cell9_3</td>
</tr>
<tr>
<td>cell1_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
<td>cell5_4</td>
<td>cell6_4</td>
<td>cell7_4</td>
<td>cell8_4</td>
<td>cell9_4</td>
</tr>
<tr>
<td>cell1_5</td>
<td>cell2_5</td>
<td>cell3_5</td>
<td>cell4_5</td>
<td>cell5_5</td>
<td>cell6_5</td>
<td>cell7_5</td>
<td>cell8_5</td>
<td>cell9_5</td>
</tr>
<tr>
<td>cell1_6</td>
<td>cell2_6</td>
<td>cell3_6</td>
<td>cell4_6</td>
<td>cell5_6</td>
<td>cell6_6</td>
<td>cell7_6</td>
<td>cell8_6</td>
<td>cell9_6</td>
</tr>
<tr>
<td>cell1_7</td>
<td>cell2_7</td>
<td>cell3_7</td>
<td>cell4_7</td>
<td>cell5_7</td>
<td>cell6_7</td>
<td>cell7_7</td>
<td>cell8_7</td>
<td>cell9_7</td>
</tr>
<tr>
<td>cell1_8</td>
<td>cell2_8</td>
<td>cell3_8</td>
<td>cell4_8</td>
<td>cell5_8</td>
<td>cell6_8</td>
<td>cell7_8</td>
<td>cell8_8</td>
<td>cell9_8</td>
</tr>
<tr>
<td>cell1_9</td>
<td>cell2_9</td>
<td>cell3_9</td>
<td>cell4_9</td>
<td>cell5_9</td>
<td>cell6_9</td>
<td>cell7_9</td>
<td>cell8_9</td>
<td>cell9_9</td>
</tr>
<tr>
<td>cell1_10</td>
<td>cell2_10</td>
<td>cell3_10</td>
<td>cell4_10</td>
<td>cell5_10</td>
<td>cell6_10</td>
<td>cell7_10</td>
<td>cell8_10</td>
<td>cell9_10</td>
</tr>
<tr>
<td>cell1_11</td>
<td>cell2_11</td>
<td>cell3_11</td>
<td>cell4_11</td>
<td>cell5_11</td>
<td>cell6_11</td>
<td>cell7_11</td>
<td>cell8_11</td>
<td>cell9_11</td>
</tr>
<tr>
<td>cell1_12</td>
<td>cell2_12</td>
<td>cell3_12</td>
<td>cell4_12</td>
<td>cell5_12</td>
<td>cell6_12</td>
<td>cell7_12</td>
<td>cell8_12</td>
<td>cell9_12</td>
</tr>
</tbody>
</table>
<div class="footers">
Copyright © 2022.
</div>
</body>
</html>`;
const generatePdf = async () => {
const { uri } = await printToFileAsync({
html, base64: false,
numberOfPages: 4,
});
console.log('File has been saved to:', uri);
await shareAsync(uri, { UTI: '.pdf', mimeType: 'application/pdf' });
}
return (
<View style={styles.container}>
<TouchableOpacity
onPress={generatePdf} style={styles.button}>
<Text style={styles.buttonText}>Convert PDF</Text>
</TouchableOpacity>
</View>
)
}
export default Task2TableOrg;
const styles = StyleSheet.create({
container: {
marginTop:50,
flex: 1,
padding: 16,
backgroundColor: '#e0ffe0',
alignItems: 'center',
justifyContent: 'center'
},
text:
{
color: "black",
fontSize: 22,
fontWeight: "500",
textAlign: "center",
backgroundColor: "#000000c0",
},
header: {
fontSize: 22,
fontWeight: "700",
textAlign: "center",
height: 65,
backgroundColor: "#FA8072",
},
dataWrapper: {
},
button: {
width: '43%',
textAlign: "center",
backgroundColor: "#2B1B17",
padding: 10,
borderRadius: 22,
marginLeft: 215,
},
buttonText:
{
fontSize: 22,
fontWeight: '600',
color: 'white',
},
});
thanks for your trying in advance!

Javascript: How to get an element by ID then add/place the element into an inline style

If possible, I would like javascript to first get an element by an ID that is placed into a table. Then add/place said element into the inline style (width="XX%") of a different div.
Note: I do not have control over the ID's output. Just know that said value will determine the width of the percentage bar.
getelementbyid:
<span *id="per-girls*">**95**</span>
place element into inline css:
<div class="bar bar1" style="width: **95**%;"></div>
$(function(){
$("#dTable").dataTable({
"columns": [
{
"title":"Languages"
},
{
"title":"Votes",
"render": function(data, type, row, meta){
return parseInt(row[1], 10) + parseInt(row[2], 10) + parseInt(row[3], 10)
}
},
{
"visible":false
},
{
"title": "Positive/Neutral/Negative",
"sortable":false,
"render": function(data, type, row, meta){
return $("<div></div>", {
"class": "bar-chart-bar"
}).append(function(){
var bars = [];
for(var i = 1; i < Object.keys(row).length; i++){
bars.push($("<div></div>",{
"class": "bar " + "bar" + i
}).css({
"width": row[i] + "%"
}))
}
return bars;
}).prop("outerHTML")
}
}
]
});
});
.bar-chart-bar {
background-color: #e8e8e8;
display: block;
position:relative;
width: 100%;
height: 40px;
}
.bar {
position: absolute;
float: left;
height: 100%;
}
.bar1 {
background-color: #007398;
z-index: 40;
}
.bar2 {
background-color: #00b0b9;
width: 100%;
z-index: 20;
}
<div class="col-sm-12">
<table id="dTable" cellspacing="0" width="100%" role="grid" aria-describedby="dTable_info">
<tbody>
<tr role="row">
<td style="width: 20%;"> % of girl gamers</td>
</td>
<td style="width: 10%;"> <span id="per-girls">95</span>% </td>
<td>
<div class="bar-chart-bar bar-girl">
<div class="bar bar1" style="width: 20%;"></div>
<div class="bar bar2"></div>
</div>
</td>
</tr>
<tr role="row">
<td> % of boy gamers</td>
</td>
<td><span id="per-boy">57</span>% </td>
<td>
<div class="bar-chart-bar bar-boy">
<div class="bar bar1" style="width: ;"></div>
<div class="bar bar2"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Instead of setting the width of a div (which you could also do with this same approach), it seems more elegant to me to use a background gradient to do the fill.
In the snippet below a custom css property is used to inform a linear gradient that fills the bar. By changing the property's value you can set the percentage filled:
function setBar(valueElemId) {
// find the element
const valueElem = document.getElementById(valueElemId);
// get its text as a numeric value
const value = Number(valueElem.textContent);
// find the nearest TR parent and set the css custom property
// that the linear-gradient uses to fill the bar
valueElem.closest('tr').style=`--pct: ${value}`;
}
// invoke setBar for each id
['per-girls', 'per-boy'].forEach(setBar);
:root {
--pct: 0; /* no fill by default */
}
.bar-chart-bar {
min-height: 30px;
background: #00b0b9; /* the background/base color */
background-image: linear-gradient(90deg,
#007398 0 calc(var(--pct) * 1%), /* from 0 to --pct */
transparent calc(var(--pct) * 1%) /* leave the rest transparent */
);
}
<div class="col-sm-12">
<table>
<tbody>
<tr>
<td style="width: 20%;"> % of girl gamers</td>
<td style="width: 10%;"> <span id="per-girls">95</span>% </td>
<td>
<div class="bar-chart-bar"></div>
</td>
</tr>
<tr>
<td> % of boy gamers</td>
<td><span id="per-boy">57</span>% </td>
<td>
<div class="bar-chart-bar"></div>
</td>
</tr>
</tbody>
</table>
</div>

How to define function and how to use each method in html

I confused how to define functions and how to use them.
I apply each method to html tables,but it seems that function didn't work well.
I define 2 classes and I can select them by clicking buttons.
In real case this processing is somewhat complicated ,so that I would like to define click effect as function.
① Why this code didn't work?
② Are there any other sophisticated method for realize this?
If someone has an opinion please let me know.
Thanks.
$('.click_btn').on('click', function(e) {
e.preventDefault();
style = $(this).data().style;
});
function hospitalization(){
$(this).nextAll(':lt(3)').addClass(style);
}
function outpatient() {
$(this).removeClass().addClass(style);
}
function register() {
function clicked() {
if (style=="style1"){
hospitalization()
}
else{
outpatient()
}
}
$(this).on({
click: clicked
});
}
$("#calendar .day").each(register);
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
td:hover {
background-color: yellow;
}
.style1{
background-color:red;}
.style2{
background-color:aqua;}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id=calendar>
<table>
<tr>
<td id=1 class=day>1</td>
<td id=2 class=day>2</td>
<td id=3 class=day>3</td>
<td id=4 class=day>4</td>
<td id=5 class=day>5</td>
<td id=6 class=day>6</td>
<td id=7 class=day>7</td>
</tr>
</table>
</div>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

You need to clean up js little bit. define global variable if u want to reuse. click pass the $(this). This will not work when u directly call method like hospitalization ()
let style = "style1"
$('.click_btn').on('click', function (e) {
e.preventDefault();
style = $(this).data().style;
console.log(style)
});
function hospitalization(elm) {
elm.nextAll(':lt(3)').addClass(style);
}
function outpatient(elm) {
elm.removeClass().addClass(style);
}
$("#calendar .day").on("click", function clicked(event) {
if (style == "style1") {
hospitalization($(this))
} else {
outpatient($(this))
}
});
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
td:hover {
background-color: yellow;
}
.style1{
background-color:red;}
.style2{
background-color:aqua;}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id=calendar>
<table>
<tr>
<td id=1 class=day>1</td>
<td id=2 class=day>2</td>
<td id=3 class=day>3</td>
<td id=4 class=day>4</td>
<td id=5 class=day>5</td>
<td id=6 class=day>6</td>
<td id=7 class=day>7</td>
</tr>
</table>
</div>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

Fixed header script function floatHead is adding an extra thead

I'm trying to make fixed headers for a table in my view. I searched and didn't find much so I ended up trying a plugin found here http://mkoryak.github.io/floatThead/. After implementing its adding an extra blank thead to my tblPersons table that looks like this:
So then I try and hide the thead using this jquery code (i have two total theads on the view, this selects the one I need via the id, or lack thereof):
$('thead[id!="personsHeader"]').hide();
Which does remove the thead, but then it removes the first line of my results which is:
Kirk | Alexander | 06/02/2015
Visual:
It doesn't make sense to me because the thead is separate from the tbody where the Kirk row is located...
Finally for reference, here is my View form code:
#using (Html.BeginForm("Index", "Persons"))
{
<div class="panel panel-default">
<div class="panel-heading">
<table id="tablePanelHeader" class="table table-bordered menu-options">
<tr>
<td>
Persons Pages:
#Html.DropDownList("PersonsDDL", new SelectList(listItems, "Value", "Text"))
</td>
<td>
Search filter: <input type="text" id="search" ="Type to search">
</td>
</tr>
<tr>
<td id="rowCount">
</td>
</tr>
</table>
</div>
<div class="span3">
<table id="tblPersons" class="table table-bordered">
<thead id="personsHeader">
<tr class="page-header">
<th>First Name</th>
<th>Last Name</th>
<th>Birthdate</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#item.firstname
</td>
<td>
#item.lastname
</td>
<td>
#item.birthdate.ToString("MM/dd/yyyy")
</td>
</tr>
}
</tbody>
</table>
</div>
}
I've given it my best shot and now I'm turning to the professionals... what am I doing wrong?

There are several ways to do this. Personally I have always been a fan of going full css instead of adding the bloat of js to this mix.
See this for an example of a fixed table header with just css - http://codepen.io/tjvantoll/pen/JEKIu
.fixed_headers {
width: #table_width;
table-layout: fixed;
border-collapse: collapse;
th { text-decoration: underline; }
th, td {
padding: 5px;
text-align: left;
}
td:nth-child(1), th:nth-child(1) { min-width: #column_one_width; }
td:nth-child(2), th:nth-child(2) { min-width: #column_two_width; }
td:nth-child(3), th:nth-child(3) { width: #column_three_width; }
thead {
background-color: #header_background_color;
color: #header_text_color;
tr {
display: block;
position: relative;
}
}
tbody {
display: block;
overflow: auto;
width: 100%;
height: #table_body_height;
tr:nth-child(even) {
background-color: #alternate_row_background_color;
}
}
}
If you are set on using a javascript library try jQuery Datatables - datatables.net/examples/basic_init/scroll_y.html

Table column re-sizing using jQuery

I am trying to write a piece of code that enables column re-sizing functionality to my data table.But its not working properly.. I explored on internet for couple of days but I could find nothing except some plug-ins. But I don't want to use any plug-in, since my data table is very complicated and if I use them the other functionalities of the table may be destroyed.Thus I tried to write my own. Can you please check and refine my code or suggest any other code that fulfills my spec....
Note: User can re-size the column towards right upto table width but towrds left, its upto td's left position only..
Eidt: Maxwell has given a great alternative..It works fine but in one case.If I try to resize towards left side, its not allowing since td width is fixed to it's content width...But I want to re-size it to left side upto it's its offset().left value by putting td's style to overflow:hidden or some other way....
Here is my piece of code....
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
table{
border-collapse:collapse;
}
table td{
border:1px solid red;
}
.vUiDtColResize{
width:2px;
height:20px;
border:1px solid blue;
float:right;
display:block;
cursor:w-resize;
position:relative;
right:-3px;
float:top;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>S.No <div class="vUiDtColResize"></div></td>
<td>Name <div class="vUiDtColResize"></div></td>
<td>Qualif <div class="vUiDtColResize"></div></td>
</tr>
</thead>
<tbody>
<tr> <td>1</td><td>Rama Rao</td><td>M.C.A</td></tr>
<tr> <td>2</td><td>Dushyanth</td><td>B.Tech</td></tr>
<tr> <td>3</td><td>AnandKumar</td><td>M.C.A</td></tr>
<tr> <td>4</td><td>Veera Reddy</td><td>B.Tech</td></tr>
</tbody>
</table>
<div id="helper"></div>
</body>
<script>
$('.vUiDtColResize').each(function(){
var _rsTd = $(this).parent('td');
var _rsTr = _rsTd.parent('tr');
var _rsTdRight,_thisLeft,_rsTdWidth;
$(this).draggable({axis:'x',containment:_rsTd,refreshPositions:true,
create:function(event,ui){
},
start:function(event,ui){
_rsTdRight = _rsTd.offset().left + _rsTd.outerWidth();
},
drag:function(event,ui){
var _sizeDiff = $(this).offset().left - _rsTdRight;
_rsTdRight = $(this).offset().left;
_rsTdWidth = _rsTd.outerWidth() + _sizeDiff;
_rsTd.outerWidth(_rsTdWidth);
},
stop:function(event,ui){
}
});
});
</script>
</html>

I merged your code with some techniques that I found — http://jsfiddle.net/tpqn7/
IMHO, there are still some problems. First of all I suppose it's would be better (also easier) if table headers can be re-sized by pressing each TH, no only small border.
Hope this helps.

After had been exploring in internet for couple of days, I got a good code,which was modified by me to make it satisfies my requirement as well( Of course, my change is bit little.It might be useful to somebody else,so I am posting here...
style
<link rel="stylesheet" href="E:\Examples\BSP\BSPExtensions\jquery-ui-1.8.18.custom.css"/>
<style>
table {
table-layout: fixed;
border-collapse: collapse;
border: 1px solid black;
}
tr.last td {
border-bottom: 1px solid black;
}
td {
border-right: 1px solid black;
border-bottom: 1px solid black;
position: relative;
white-space:nowrap;
padding: 2px 5px;
text-align: left;
overflow:hidden;
}
td.last {
border-right: none;
}
thead td div:first-child{
text-overflow:ellipsis;
overflow:hidden;
}
tbody td div:first-child{
overflow:hidden;
}
.scrollContainer {
overflow:auto;
width:700px;
height:auto;
display:inline-block;
border:1px solid red;
}
#-moz-document url-prefix() {
.resizeHelper,.ui-resizable-e {
position: relative;
float: right;
}
}
</style>
Script
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script>
/**
* Enables resizable data table columns.
**/
(function($) {
$.widget("ih.resizableColumns", {
_create: function() {
this._initResizable();
},
_initResizable: function() {
var colElement, colWidth, originalSize;
var table = this.element;
this.element.find("thead td").resizable({
handles: {"e": ".resizeHelper"},
minWidth: 2, // default min width in case there is no label
// set correct COL element and original size
start:function(event, ui) {
var colIndex = ui.helper.index() + 1;
colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
originalSize = ui.size.width;
},
// set COL width
resize: function(event, ui) {
var resizeDelta = ui.size.width - originalSize;
var newColWidth = colWidth + resizeDelta;
colElement.width(newColWidth);
// height must be set in order to prevent IE9 to set wrong height
$(this).css("height", "auto");
}
});
}
});
// init resizable
$("#MyTable").resizableColumns();
})(jQuery);
</script>
Your html is to be like:*
<div class="scrollContainer">
<table class="resizable" id="MyTable" width="100%">
<thead>
<tr>
<td class="ui-resizable" style="width:100px;">
<div>
<span >Column 1</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 2</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:300px;">
<div>
<span >Column 3</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:150px;">
<div>
<span >Column 4</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 5</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable last" style="width:100px;">
<div>
<span >Column 6</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
<tr class="last">
<td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
</tbody>
</table>
</div>

Categories