When using RTL, the colums go crazy on resize ...
I'm using colResizable. Here is an example:
http://jsfiddle.net/r0rfrhb7/
$("#nonFixedSample").colResizable({
fixed: false,
liveDrag: true,
gripInnerHtml: "<div class='grip2'></div>",
draggingClass: "dragging"
});
and the simple table code
<table dir="RTL" id="nonFixedSample" width="50%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td class="left">cellaaaaaaaaaaaa</td>
<td>cell</td>
<td class="right">cellaaaaaaaaaa</td>
</tr>
<tr>
<td class="left">celaaaaaaaaaaaal</td>
<td>cell</td>
<td class="right">ceaaaaaall</td>
</tr>
<tr>
<td class="left bottom">celaaaaal</td>
<td class="bottom">celaaaaaaaaaaaaaaaal</td>
<td class="bottom right">celaaaaaaaal</td>
</tr>
</table>
what can i do ?
thanks
Open a bug on the author of the library. But they say they won't support it
http://github.com/alvaro-prieto/colResizable/issues/69
Related
I used jQuery DataTable to show some data.
Here is my code.
I tried to add collapse/expand using bootstrap collapse functionality.
So I made two rows.
But if you see console it throws an javascript error so code below it not running.
How can I fix this?
Here is html code:
<table id="taskTable">
<thead class="bg-light text-capitalize">
<tr>
<th>Subject</th>
<th>Name</th>
<th>Duration</th>
<th>User</th>
</tr>
<tr style="display:none;">
<th></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1">
<td>Subject1</td>
<td>Name1</td>
<td>Duration1</td>
<td>User1</td>
</tr>
<tr id="demo1">
<td>aaa</td>
</tr>
<tr data-toggle="collapse" data-target="#demo2">
<td>Subject2</td>
<td>Name2</td>
<td>Duration2</td>
<td>User2</td>
</tr>
<tr id="demo2">
<td>aaa</td>
</tr>
</tbody>
</table>
Not feeling good using this approach:
Because of search, the sort, etc will break the concept of <tr> as header and it's next <tr> as content.
Maybe you can achieve the same thing using a different approach, like you can have child rows like here. But you can also fix the above problem as below:
JS Fiddle
HTML
<table id="taskTable">
<thead class="bg-light text-capitalize">
<tr>
<th>Subject</th>
<th>Name</th>
<th>Duration</th>
<th>User</th>
</tr>
<tr style="display:none;">
<th colspan="4"></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1">
<td>Subject1</td>
<td>Name1</td>
<td>Duration1</td>
<td>User1</td>
</tr>
<tr id="demo1">
<td colspan="4">aaa</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr data-toggle="collapse" data-target="#demo2">
<td>Subject2</td>
<td>Name2</td>
<td>Duration2</td>
<td>User2</td>
</tr>
<tr id="demo2">
<td colspan="4">aa2</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
</tbody>
</table>
JS
$("#taskTable").dataTable({
"ordering": false
});
I've the html code as shown below.
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="CSSTableGenerator" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
<tr/>
<tr>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
<tr/>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
<tr/>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
<tr/>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
<tr/>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
</table>
</div>
In the above html code, there are few duplicate components present in adjacent properties column. Is there a way we can identify those duplicate components from properties column and delete them?
In the above example, two components CatalogTools and InventoryManager are present in properties column. Because of this, their respective properties have moved to an adjacent column on the right side.
The above html code might look faulty as it is generated from server, so I want to tidy up with jquery.
Eventually, I'm looking for an html as shown in this screenshot.
If you need some more details, please do let me know.
Thanks in advance.
var dups = $('.comps + .comps')
dups.remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="CSSTableGenerator" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
<tr/>
<tr/>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
<tr/>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
<tr/>
<tr/>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
<tr/>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
<tr/>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
<tr/>
<tr/>
</tr>
</tr>
</table>
</div>
Below code is working fine with Mozilla and Chrome, but not with Internet explorer. Here, from first page (div 12), I am trying to go to a specific location on next page(div 8) by click event. I tried everything and searched on internet but not able to find a solution. Can anyone please help me out with this?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table
{
border-collapse:collapse;
}
#table8{
display: none;
}
th
{
background-color:#bababa;
color:white;
font-family:"Arial";
}
button{
font-size: 20px;
}
a:link {color:blue;}
a:visited {color:purple;}
a:hover {color:red;}
a:active {color:red;}
a.bigsize:hover {font-size:90%;}
.some{
width:50px;
}
</style>
<script>
function show(nr){
document.getElementById("table8").style.display="none"; <!-- Shows -->
document.getElementById("table12").style.display="none"; <!-- Shows -->
document.getElementById("table"+nr).style.display="block";
}
</script>
</style>
<div id="table12">
<h2><section id="back223">Values</section></h2>
<br><br>
<table border=1 cellpadding=7>
<tr><th>Table name</th>
</tr>
<tr bgcolor="#ffffe6"><td><a onclick='show(8);' href="#linkc1" name="linkc1">IPAddress</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc2" name="linkc2">IP_ROUTE1</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc3" name="linkc3">IP_ROUTE2</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc4" name="linkc4">IP_ROUTE3</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc5" name="linkc5">IP_ROUTE4</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc6" name="linkc6">IP_ROUTE5</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc7" name="linkc7">IP_ROUTE6</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc8" name="linkc8">IP_ROUTE7</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc9" name="linkc9">IP_ROUTE8</a></td>
</tr>
</table>
</div>
<div id="table8">
<div style="position:fixed;right:40px;top:20px;">
<a name="t12" href="#t12" onclick='show(12);'><button style="height: 35px; width: 85px"> Back </button></a>
</div>
<h2>Values</h2>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc1">IPAddress </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>Type</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#e6ffff">
<td>Dns</td>
<td>1</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc2">IP_ROUTE1 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>0.0.0.0</td>
<td>0</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc3">IP_ROUTE2 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>1.1.1.1</td>
<td>1</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc4">IP_ROUTE3 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>2.2.2.2</td>
<td>2</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc5">IP_ROUTE4 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>3.3.3.3</td>
<td>3</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc6">IP_ROUTE5 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>4.4.4.4</td>
<td>4</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc7">IP_ROUTE6 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>5.5.5.5</td>
<td>5</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc8">IP_ROUTE7 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>6.6.6.6</td>
<td>6</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc9">IP_ROUTE8 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>7.7.7.7</td>
<td>7</td>
</tr>
</table>
</div>
</body>
</html>
EDIT: Added pics to show the issue clearly.
INPUT: This is the first page where you will click a link out of the list. So, I am clicking IP_ROUTE4 on this page.
EXPECTED BEHAVIOUR: This is what is supposed to be the expected behaviour. On first page, I clicked on IP_ROUTE4, so this table should appear on top so that user don't have to scroll and search for it.
BEHAVIOUR IN IE: This is what is happening with IE. It is redirecting me to the top of the page instead of the table IP_ROUTE4.
I tried to make your example work in IE8 using mainly articles:
HTML anchor link - href and onclick both?
Disable onClick event if anchor href link was executed
window.location = #anchor doesn't work in IE
javascript location.hash refreshing in IE
window.location.hash issue in IE7
http://caniuse.com/#search=section
Internet Explorer 8 compatibility issues
http://html5please.com/#gtie7
ScrollIntoView For Table Row Not Working in IE 8
I'm giving this up as a useless way of spending time. I can only recommend you to support Modern Browsers.
Internet Explorer is known to be lot of pain for developers for ages. Due to lack of support for standards, proprietary extensions etc. It had improved lately, but not in IE8.
IE 8.0.6001.18702 on my machine in the HTML5test - How well does your browser support HTML5? shows only 43 out of 555 points. e.g. it does not support <section> element that you use as the anchor target..
If you really have to support IE8 then check the above links for some tips or use some library, like jQuery 1.x, that has all those hacks, workarounds and polyfills built in.
I have multiple tables stacked inside a div container as below:-
<div id="myContent" style="display: block;">
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Health Care
</td>
</tr>
<tr>
<td align="left">
20 Wisconsin Ave</td>
</tr>
<tr>
<td align="left">
641.235.5900
</td>
</tr>
<tr>
<td align="left">
No website
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 10px;">
<table >
<tbody>
<tr>
<td align="left">Housing</td>
</tr>
<tr>
<td align="left">
N/A</td>
</tr>
<tr>
<td align="left">
641.255.3884
</td>
</tr>
<tr>
<td align="left">
www.housingl.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Employment</td>
</tr>
<tr>
<td align="left">N/A</td>
</tr>
<tr>
<td align="left">
641.743.0500
</td>
</tr>
<tr>
<td align="left">
http://www.noexperience.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
</div>
I am trying to run a condition to find the TD with N/A and move those tables to the top. This is an additional question bult on the top of my previous question:
Finding the text "N/A" and hiding an image in table's next TD
I have a starting trouble with this code. Any support is appreciated.
$('td:contains(N/A)').closest('table').prependTo('#myContent');
jsFiddle example
$('td').each(function(){
if ($(this).text() === 'N/A') {
$(this).parents('table').detach().prependTo('#myContent');
}
});
Have some text that needs to be replaced, searched around this website for all results with similar titles and no luck.
Currently the text is Handling Fee: and I need it to say Shipping Insurance: - Please Help!
Here's the html output of the page;
<div class="c3 right">
<h2>Order Summary</h2>
<table class="styledtable">
<thead>
<tr>
<th>Quantity</th>
<th>Product</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">1</td>
<td><strong>ACT Clutch Kit - Heavy Duty (HD) (DC1-HDSS)</strong>
<div class="order_item_notes">HD Clutch Kit<br/> Performance Street Disc (SS)</div>
<div class="order_item_specs">
Components : D018, 3001532, ATCP23<br/>
</div>
</td>
<td style="text-align:right">$314.25</td>
<td style="text-align:right">$314.25</td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Items Total</td>
<td style="text-align:right">$<span id="itemstotal">314.25</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Shipping:</td>
<td style="text-align:right">$<span id="shippingtotal">TBD</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Handling Fee:</td>
<td style="text-align:right">$<span id="handlingfee">0.00</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Tax:</td>
<td style="text-align:right">$<span id="taxtotal">0.00</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Order Total:</td>
<td style="text-align:right">$<span id="total">0.00</span></td>
</tr>
</tbody>
</table>
<p>Upon checkout, you <strong>must enter</strong> your cars <strong>year, make and model</strong> into the comments section at the bottom of this page. <strong> We will not complete your order if we do not have this information!</strong></p>
<p> </p>
</div>
</div>
You can use a jQuery :contains selector:
$("td:contains('Handling Fee:')").text("Shipping Insurance:");
You can see it in action here: http://jsfiddle.net/cnhYj/
Update
in order to get it to work after the document is ready you can write it like that:
$(function() {
$("td:contains('Handling Fee:')").text("Shipping Insurance:");
});
$("td:contains('Handling Fee:').text('Shipping Insurance');
I don't see any javascript there just html
you want to turn this..
<td colspan="3" style="text-align:right">Handling Fee:</td>
into this...
<td colspan="3" style="text-align:right">Shipping Insurance:</td>