I want the last two rows of a table to be folded and collapse when user click on something like "Click Here to see more rows". that would appear as the last row of the first two rows, and turn into some toggle button if a user wants to fold them back.
After understanding there's no way to do this via CSS2 only,
I guess that if I want IE8 support as well I would need to use javascript/jquery.
I found a jquery accordion example and tried to implement it on a table, but it didn't really work.
Here's a fiddle
Tried wrapping up the last two rows with a <div class="open">` but it didn't work (barely have knowledge in jquery, just trying to patch this up for a website).
On IE7 if it's impossible, I want all the rows to be collapased from the start.
HTML:
<table border="1">
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr class="open">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
javascript:
$(document).ready(function () {
$('table').accordion({collapsible: true,active: false,header: '.open' });
});
http://jsfiddle.net/4rkkksmd/4/
javascript:
$('tr.btn td').click(function(){
$('tr.hidden .slide').toggle(200)
});
html:
<table border="1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5asdfasdfasdf</th>
</tr>
</thead>
<tbody>
<tr class="btn">
<td colspan="5">Click me</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
Related
Basically i have an interactive table below setup on my website which i would like to be able to generate a CSV file from the table on a button click, and have simultaneously upload that CSV file to an input type = "file" field. Without prompting a download on the browser.
<table>
<tbody>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Title</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
</tbody>
</table>
While attempting to get the proper jquery for this question I ran into a question. Shouldn't each of these have similar outputs? The first one doesn't even output the class of the divs
var list = document.querySelectorAll('[aria-label="Help"]');
console.log('&&&&&&&&&&&&&&');
$('[aria-label="Help"] tr div').each(function() {
console.log($(this).attr('class'));
console.log($(this).text());
});
console.log('&&THIS ONE WORKS&&&');
$('.text:not(:contains(X-Men 2),:contains(X-Men 3))').each(function() {
console.log($(this).text());
});
console.log('&&&&&&&&&&&&&&');
$('[aria-label="Help"] .text:not(:contains(X-Men 2),:contains(X-Men 3))').each(function() {
console.log($(this).text());
});
console.log('&&&&&&&&&&&&&&');
$('.text:not(:contains(X-Men 2),:contains(X-Men 3))',$(list)).each(function() {
console.log($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id=5 aria-label="Help">
<thead></thead>
<tbody>
<tr>
<div class='abc'>
<label><a><span class='text'>Game of thrones</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>Harry Potter</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men 2</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men 3</span></a></label>
</div>
</tr>
</tbody>
</table>
Putting a div inside a tr is invalid html, so the browser "fixes" the layout for you, breaking your selectors that rely on the expected hierarchy.
Here's what the inspector shows:
<div class="abc">
<label><a><span class="text">Game of thrones</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">Harry Potter</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men 2</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men 3</span></a></label>
</div>
<table id="5" aria-label="Help">
<thead></thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
https://jsfiddle.net/bduhtfL6/
I have a login form and I would like to kendofy it i.e. basically convert it into a responsive form like this: http://demos.telerik.com/kendo-ui/validator/index
Is there a quick way that would allow me to convert my existing username and password fields to kendo textbox fields such that I am able to achieve the responsive design without actually creating the fields again myself? Looking forward to your suggestions.
My Form:
<form action="https://../Portal" method="post" name="loginForm">
<input name="act" value="portalLogin" type="hidden">
<input name="c" value="12912" type="hidden">
<input name="p" value="101074" type="hidden">
<input name="d" value="101076" type="hidden">
<input name="g" value="101097" type="hidden">
<input name="objDefId" value="13439" type="hidden">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div id="rbi_S_101098" name="Notification Message">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="k-content" id="rbi_S_101100" name="User Login">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<table>
<tbody>
<tr>
<td nowrap="" align="right"><strong>Login Name </strong>
</td>
<td nowrap="">
<input class="k-textbox" name="loginName" maxlength="50" size="40" type="text">
</td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td nowrap="" align="right"><strong>Password </strong>
</td>
<td nowrap="">
<input class="k-textbox" name="password" maxlength="50" size="40" type="password">
</td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td></td>
<td alignmant="right" nowrap="">
<strong><input class="btn btn-small" value=" Login " type="submit"></strong> </td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td></td>
<td alignment="right" nowrap="">
Forgot your password? </td>
</tr>
</tbody>
</table>
</td>
<script>
document.loginForm.loginName.focus();
</script>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div id="rbi_S_114558" name="Scripts Section">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="detailHTMLCol" colspan="2">
</td>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Cheers.
https://jsfiddle.net/5ac2mjpd/53/
"Show data in table" shifts its space whenever clicked. Is there a way to avoid it?
Basically I wanted the contents in the right of "dropdown" to collapse and the content present in the table to expand whenever "show data in table" link in clicked.
<div class="cont">
<select class="pull-left">
<option>123456789 1234 123</option>
<option>456</option>
</select>
<div class="pull-left in-block">
<div class="side-header">
<div>abc</div>
<div>def</div>
</div>
<div class="side-content1">
<div>ghi</div>
<div>jkl</div>
<div>mno</div>
</div>
</div>
<div class="clear details1 adjust-pos">
<span class="emulate-link"><i class="sprite-right"></i> show data in table</span>
<div class="details1-content hide">
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2 </th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<div class="cont clear">
<select class="pull-left">
<option>123456789 1234 123</option>
<option>456</option>
</select>
<div class="pull-left in-block">
<div class="side-header">
<div>abc</div>
<div>def</div>
</div>
<div class="side-content2">
<div>ghi</div>
<div>jkl</div>
<div>mno</div>
</div>
</div>
<div class="clear details2 adjust-pos">
<span class="emulate-link"><i class="sprite-right"></i> show data in table</span>
<div class="details2-content hide">
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2 </th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
</tbody></table>
</div>
</div>
</div>
I'm pretty lost with Bootstrap.js tabs. I have got this html:
<ul class="button-menu" id="stores" data-tabs="tabs">
</ul>
<div class="tab-content" id="storesGoods">
<div class="tab-pane" id="store0">test</div>
<div class="tab-pane" id="store1">test2</div>
</div>
And I generate with JS it's content
function updateShop(){
var actualStores = "";
for (var i=0;i<actualTown.store.length;i++){
actualStores=actualStores + "<li><a href='#store"+i+"' data-toggle='stores'>"+actualTown.store[i].name+"</a></li>"
$("#store"+i).html(actualTown.store[i].listGoods());
};
$("#stores").html(actualStores);
};
When I view my html via Chrome, I see that it generated this:
<ul class="button-menu" id="stores" data-tabs="tabs">
<li>24/7 Store</li>
<li>Liquiro</li>
</ul>
<div class="tab-content" id="storesGoods">
<div class="tab-pane" id="store0">
<p>24/7 Store: All day, all night, every day!</p>
<table class="table table-condensed">
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th></th>
</tr>
<tr>
<td>Bottled Water</td>
<td>0.84</td>
<td><a class="buy" onclick="buyToInventory(d1)">buy</a>
</td>
</tr>
<tr>
<td>Raush Juice</td>
<td>0.9</td>
<td><a class="buy" onclick="buyToInventory(d2)">buy</a>
</td>
</tr>
<tr>
<td>Bohemia Chips</td>
<td>0.7</td>
<td><a class="buy" onclick="buyToInventory(e2)">buy</a>
</td>
</tr>
<tr>
<td>Vodka Alosuth</td>
<td>2.7</td>
<td><a class="buy" onclick="buyToInventory(d3)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (10°)</td>
<td>0.8</td>
<td><a class="buy" onclick="buyToInventory(d7)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (12°)</td>
<td>0.98</td>
<td><a class="buy" onclick="buyToInventory(d8)">buy</a>
</td>
</tr>
<tr>
<td>Bread</td>
<td>1.2</td>
<td><a class="buy" onclick="buyToInventory(e1)">buy</a>
</td>
</tr>
<tr>
<td>Rosito Schnap</td>
<td>0.68</td>
<td><a class="buy" onclick="buyToInventory(d10)">buy</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="store1">
<p>Liquiro: Bad day? Liquiro will fix that, buy some boost for yourself and some chips.</p>
<table class="table table-condensed">
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th></th>
</tr>
<tr>
<td>Vodka Alosuth</td>
<td>2.7</td>
<td><a class="buy" onclick="buyToInventory(d3)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (10°)</td>
<td>0.8</td>
<td><a class="buy" onclick="buyToInventory(d7)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (12°)</td>
<td>0.98</td>
<td><a class="buy" onclick="buyToInventory(d8)">buy</a>
</td>
</tr>
<tr>
<td>Rosito Schnap</td>
<td>0.68</td>
<td><a class="buy" onclick="buyToInventory(d10)">buy</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
So it's generated as it's supossed to be but switching tabs doesn't work, when I click on something in ul #stores it doesnt change tab, it just add to url www.something.com/#store0 and nothing happens.
Does anyone know how to make these tabs working, I'm totally lost.
Thanks for any help!
There is nothing like data-toggle="store" in bootstrap docs, it should be data-toggle="tab", and the plugin will figure itself out which is the right target, via the href attribute.
Their example is quite straightforward, just follow it.