I am trying to have links that by clicking on it will show and hide the table below it, once I land on the page all I would like to see are links. I trying with this sample code, but not getting anywhere, any suggestions?
<html>
<title>hise show</title>
<head>
<script>jquery link here</script>
<script type="text/javascript">
$(document).ready(function() {
$('.act table').hide();
$('.see').click(function() {
$(this).parents('table').find('td').slideToggle("slow");
});
});
</script>
</head>
<body>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>
</body>
</html>
Thank you!
You have just to change your selector to :
$(this).next('table').slideToggle("slow");
Using JQuery next() function your code will work.
$('.act table').hide();
$('.see').click(function() {
$(this).next('table').slideToggle("slow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>
$('#showTable').click(function(){
$('#mytable').toggleClass('hidden');
if($('#showTable').text()=='Show Table') $('#showTable').text('Hide Table');
else $('#showTable').text('Show Table');
});
table tr td{ border: 1px solid #383838; }
table { border: 1px solid #383838; }
.hidden{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Show Table
<table class="hidden" id="mytable">
<tr>
<td>
Sample Table
</td>
<td>
Sample Table
</td>
</tr>
<tr>
<td>
Sample Table
</td>
<td>
Sample Table
</td>
</tr>
</table>
Another quick solution for your approach: Check this code: http://jsfiddle.net/vxt5h9o7/
Try this, run the snippet
<!DOCTYPE html>
<html>
<head>
<title>The code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>
<script>
$(document).ready(function(){
$(".act").hide();
$(".see").click(function(){
$(this).next().toggle();
});
});
</script>
</body>
</html>
Related
HI can someone pls help me I am new to code and this is my college assignment in which we are not supposed to use CSS, only using HTML how can I add space between text and table-border.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="5" CELLSPACING="4" CELLPADDING="3">
<TR BGCOLOR="BLUE">
<TH ALIGN="CENTER" HEIGHT="20">
<FONT SIZE="4" COLOR="WHITE"> <u>First Name</u>
<TH ALIGN="CENTER" HEIGHT="20">
<FONT SIZE="4" COLOR="WHITE"> <u>Last Name</u>
</TR>
<TR BGCOLOR="YELLOW">
<TD> <u>Keith</u>
<TD><u>Richards</u>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Mick</u>
<TD><u>Jagger</u>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Bill</u>
<TD><u>Wyman</u>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Ron</u>
<TD><u>Wood</u>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Charlie</u>
<TD><u>Watts</u>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Mick</u>
<TD><u>Taylor</u>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Brian</u>
<TD><u>Jones</u>
</TR>
</TABLE>
</BODY>
</HTML>
my code-
<TD> <u> Keith</u> </TD>
Try using   should give you the desired result.
To add space between cell content and cell wall you can use the cellpadding attribute in table tag.
The HTML cellpadding Attribute is used to specify the space
between the cell content and cell wall. The cellpadding attribute is
set in terms of pixels.
Refer: cellpadding
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="5" CELLSPACING="4" CELLPADDING="10">
<TR BGCOLOR="BLUE">
<TH ALIGN="CENTER" HEIGHT="20">
<FONT SIZE="4" COLOR="WHITE"> <u>First Name</u>
<TH ALIGN="CENTER" HEIGHT="20">
<FONT SIZE="4" COLOR="WHITE"> <u>Last Name</u>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Keith</u></TD>
<TD><u>Richards</u></TD>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Mick</u></TD>
<TD><u>Jagger</u></TD>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Bill</u></TD>
<TD><u>Wyman</u></TD>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Ron</u></TD>
<TD><u>Wood</u></TD>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Charlie</u></TD>
<TD><u>Watts</u></TD>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Mick</u></TD>
<TD><u>Taylor</u></TD>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Brian</u></TD>
<TD><u>Jones</u></TD>
</TR>
</TABLE>
</BODY>
</HTML>
How to replace append() of jQuery with append() of JavaScript
I have two tables and I want to insert table 2 at the end of table 1. With jQuery it's so easy that I came up with the "good idea" to try doing it with javascript.
Here is the code of what I have tried so far:
$(document).ready(function (){
// Version using jQuery
$("#jQuery").on("click",
function () {
$("#lst1").find("tbody").append(
$("#lst2").find("tbody").html()
);
});
// Version using JavaScript
$("#jScript").on("click",
function () {
document.querySelector("#lst1").querySelector("tbody").append(
document.querySelector("#lst2").querySelector("tbody").innerHTML
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 1</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
</tbody>
</table>
</div>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst2" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 2</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
<tr>
<td>00010</td>
<td> </td>
</tr>
<tr>
<td>00020</td>
<td> </td>
</tr>
<tr>
<td>00030</td>
<td> </td>
</tr>
<tr>
<td>00031</td>
<td> </td>
</tr>
<tr>
<td>00040</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<button id="jQuery">Merge jQuery</button>
<button id="jScript">Merge jScript</button>
</body>
</html>
My question:
How to replace append() from jQuery with append() JavaScript?
In vanilla JavaScript, it's .appendChild(), not .append() and you don't append .innerHTML, you have to append a DOM node.
$(document).ready(function (){
// Version using jQuery
$("#jQuery").on("click",
function () {
$("#lst1").find("tbody").append(
$("#lst2").find("tbody").html()
);
});
// Version using JavaScript
$("#jScript").on("click",
function () {
document.querySelector("#lst1").querySelector("tbody").appendChild(
document.querySelector("#lst2").querySelector("tbody")
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 1</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
</tbody>
</table>
</div>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst2" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 2</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
<tr>
<td>00010</td>
<td> </td>
</tr>
<tr>
<td>00020</td>
<td> </td>
</tr>
<tr>
<td>00030</td>
<td> </td>
</tr>
<tr>
<td>00031</td>
<td> </td>
</tr>
<tr>
<td>00040</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<button id="jQuery">Merge jQuery</button>
<button id="jScript">Merge jScript</button>
</body>
</html>
I want to show only one tbody content at a time when a user clicks on a table header
I have four tables in a html document which shows the content of first table by default when a user clicks on another title the original tbody> content remains open until a user click that header I'm struggling to find a solution so that when a user click on a new header only the content of that header is shown
Here is my html and jquery code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Accordion table</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("tbody:not(.first)").hide();
$("table thead tr th").click(function(){
$(this).parents('table') .children('tbody').fadeToggle("fast");
});
});
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">President</th>
</tr>
</thead>
<tbody class="first">
<tr>
<td>Archdeacon Bathurst</td>
<td>1882 – 1910</td>
</tr>
<tr>
<td>Rev W W C Baker</td>
<td>1910 – 1929</td>
</tr>
</tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">Vice President</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anthony H Smith</td>
<td>1988 – 1991</td>
</tr>
<tr>
<td>John R Pemble</td>
<td>1991 – 1994</td>
</tr>
</tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">Honorary Secretary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr C Hertbert</td>
<td>1882 – 1887</td>
</tr>
<tr>
<td>Rev W W C Baker</td>
<td>1887 – 1895</td>
</tr>
</tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">Honorary Treasurer</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr T G Elger</td>
<td>1882 – 1895</td>
</tr>
<tr>
<td>Mr T Bull</td>
<td>1895 – 1907</td>
</tr>
</tbody>
</table>
</body>
</html>
You need to hide all other tbody elements after showing current item
$(function() {
$("tbody:not(.first)").hide();
$("table thead tr th").click(function() {
var $tbody = $(this).closest('table').children('tbody').fadeToggle("fast");
$("tbody").not($tbody).fadeOut('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">President</th>
</tr>
</thead>
<tbody class="first">
<tr>
<td>Archdeacon Bathurst</td>
<td>1882 – 1910</td>
</tr>
<tr>
<td>Rev W W C Baker</td>
<td>1910 – 1929</td>
</tr>
</tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">Vice President</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anthony H Smith</td>
<td>1988 – 1991</td>
</tr>
<tr>
<td>John R Pemble</td>
<td>1991 – 1994</td>
</tr>
</tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">Honorary Secretary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr C Hertbert</td>
<td>1882 – 1887</td>
</tr>
<tr>
<td>Rev W W C Baker</td>
<td>1887 – 1895</td>
</tr>
</tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">Honorary Treasurer</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr T G Elger</td>
<td>1882 – 1895</td>
</tr>
<tr>
<td>Mr T Bull</td>
<td>1895 – 1907</td>
</tr>
</tbody>
</table>
This should work:
$(function() {
$("tbody:not(.first)").hide();
$("table thead tr th").click(function() {
$("tbody").hide();
$(this).parents('table').children('tbody').fadeToggle("fast");
});
});
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Accordion table</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">President</th>
</tr>
</thead>
<tbody class="first">
<tr>
<td>Archdeacon Bathurst</td>
<td>1882 – 1910</td>
</tr>
<tr>
<td>Rev W W C Baker</td>
<td>1910 – 1929</td>
</tr>
</tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">Vice President</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anthony H Smith</td>
<td>1988 – 1991</td>
</tr>
<tr>
<td>John R Pemble</td>
<td>1991 – 1994</td>
</tr>
</tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">Honorary Secretary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr C Hertbert</td>
<td>1882 – 1887</td>
</tr>
<tr>
<td>Rev W W C Baker</td>
<td>1887 – 1895</td>
</tr>
</tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2" scope="col">Honorary Treasurer</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr T G Elger</td>
<td>1882 – 1895</td>
</tr>
<tr>
<td>Mr T Bull</td>
<td>1895 – 1907</td>
</tr>
</tbody>
</table>
</body>
</html>
I'm trying to search some tables and click a button inside a cell of a specific table. This is my current code
links[1].click();
iimPlayCode('WAIT SECONDS = 2')
var compTabs = window.content.document.getElementById('compTabs')
var compTabList = compTabs.getElementsByClassName("tabNavigation top_tabs")
if (compTabList[0].children[0].innerText.match(/voting/gi)) {
$('#candidatesList').each(function () {
if ($(this).text().match(/john/gi)) { // search for text
// everything works fine until here, don't know how to click the specific button
//get id of button and click it
}
})
}
This is the result of $(this).text():
John
100%
05/09/2013
Vote
And this would be the result of $(this).html()
<tr style="text-align: center;">
<td><img src="http://somewebsite.com" width="36px"></td>
<td>John</td>
<td>100%</td>
<td>05/09/2013</td>
<td class="last-child"><button rel="123" id="6332" class="button_85 sa_vote">Vote</button></td>
</tr>
What I have to do is to click the button with that specific ID in this case '6332'.
This is a bit more complete html code.
<div id="compTabs">
<div class="tabs">
<ul class="tabNavigation top_tabs">
<li rel="#tab_voting" class="selected">
<table cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="28px"><img src="http://somewebsite.com/design/img/new_style/tabs/voting.png"></td>
<td>Voting</td>
</tr>
</tbody></table>
</li>
<li rel="#tab_shareholders">
<table cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="28px"><img src="http://somewebsite.com/design/img/new_style/tabs/shareholders.png"></td>
<td>Shareholders</td>
</tr>
</tbody></table>
</li>
</ul>
<div class="compTabsContent" id="tab_voting" style="display: block;">
<div style="height:390px;margin:0;" class="companyBody">
<table cellspacing="0" cellpadding="0" width="100%" style="margin-top: 10px;" class="proTable">
<tbody><tr valign="top">
<td style="text-align:center;height:35px;vertical-align:middle;font-size:14px;">
Vote to elect <b style="color:red"> General Director </b>. <div id="startTimer" class="timerStyle01">1d 22h:13m:30s</div>
</td>
</tr>
</tbody></table>
<table cellspacing="0" cellpadding="0" width="100%" style="margin-top:10px">
<tbody><tr valign="top"><td width="35%">
<table cellspacing="0" cellpadding="0" class="proTable newTable">
<thead>
<tr><th class="thb" colspan="3">All shareholders</th></tr>
<tr>
<th width="36px"> </th>
<th>Shareholder name</th>
<th>He voted</th>
</tr></thead>
<tbody id="listOfAdministrators">
<tr style="text-align: center;">
<td><img width="36px" src="http://somewebsite.com/content/user/small/user_1364379268_234.jpg"></td>
<td>John</td>
<td><img src="http://somewebsite.com/design/img/new_style/tabs/no.png"></td>
</tr>
</tbody>
</table>
</td>
<td width="10px"></td>
<td>
<table cellspacing="0" cellpadding="0" class="proTable newTable">
<thead>
<tr><th class="thb" colspan="5">Vote to elect <b style="color:red"> General Director </b>.</th></tr>
<tr>
<th width="36px"> </th>
<th>Shareholder name</th>
<th>Shares</th>
<th>Date of shares purchase</th>
<th> </th></tr>
</thead>
<tbody id="candidatesList">
<tr style="text-align: center;">
<td><img width="36px" src="http://somewebsite.com/content/user/small/user_1364379268_234.jpg"></td>
<td>John</td>
<td>100%</td>
<td>05/09/2013</td>
<td class="last-child"><button class="button_85 sa_vote" id="60928" rel="234">Vote</button></td>
</tr>
</tbody>
</table>
</td></tr>
</tbody></table>
</div></div>
<div class="compTabsContent" id="tab_shareholders" style="display: none;"><div style="height:390px;margin:0;" class="companyBody">
<table cellspacing="0" cellpadding="0" style="margin-top:15px;font-size: 11px;" class="proTable newTable">
<thead>
<tr><th style="font-size:13px;" class="thb" colspan="4">All shareholders</th></tr>
<tr>
<th width="36px" style="border-left: 1px solid #d2d2d2;"> </th>
<th>Shareholder name</th>
<th>Shares</th>
<th>Date of shares purchase</th>
</tr>
</thead>
<tbody>
<tr style="text-align: center;">
<td><img width="36px" src="http://somewebsite.com/content/user/small/user_1364379268_234.jpg"></td>
<td>John</td>
<td>100%</td>
<td class="last-child">05/09/2013</td>
</tr>
</tbody>
</table>
</div></div>
</div>
</div>
You may try a solution without jQuery, something like this:
links[1].click();
iimPlayCode(
"WAIT SECONDS=2" + "\n" +
"TAG POS=1 TYPE=TBODY ATTR=ID:candidatesList" + "\n" +
"TAG POS=R-1 TYPE=* ATTR=*" + "\n" +
"TAG POS=R1 TYPE=TD ATTR=TXT:*john*" + "\n" +
"TAG POS=R1 TYPE=BUTTON ATTR=TXT:Vote" + "\n"
);
I have data displaying in an html table. I need to sort only one column
https://jsfiddle.net/5a3j7ek1/
<iframe width="100%" height="300" src="//jsfiddle.net/5a3j7ek1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
how do i get the data from the structure number column and sort it?
Including tablesorter: http://tablesorter.com/docs/
HTML
<table id="mytable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td originalid="pivot__R1" class="p-dim-member" fidx="1" val="109">
<div class="wrapper">
<div class="p-head-content"><span>109</span>
</div>
</div>
</td>
<td>data3</td>
</tr>
<tr>
<td originalid="pivot__R4" class="p-dim-member" fidx="1" val="11" style="height: 24px;">
<div class="wrapper">
<div class="p-head-content"><span>11</span>
</div>
</div>
</td>
<td>data5</td>
</tr>
</tbody>
</table>
JS:
$("#mytable").tablesorter();
https://jsfiddle.net/5a3j7ek1/1/