I have a div displaying radio button allowing tables to be displayed and a ok and cancel button. When user clicks ok I would like to call a function whose action depends on the selected cell of the table. How can I achieve that?
Here the code:
<!-- Options Dialogue box for Basis -->
<div id="interfacebox basis_DB" class="dialogWindow fileDialog" style="display: none;">
<p>Basis Set Options</p>
<div id="minimal_basis" class="RadioButtonidle menu2" style="Top: 48px; left: 5px;" onclick="changeClass2(this)">
</div>
<div id="RadioOption" style="Top: 40px; left: 25px;">
<p>Minimal</p>
</div>
<table id="minimal_basis_DB" class="dialog" align="center" cellpadding="4" cellspacing="12" style="display: none;">
<tr>
<td cellid="STO-2G" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-2G
</td>
<td cellid="STO-3G" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-3G
</td>
<td cellid="STO-3G*" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-3G*
</td>
<td cellid="STO-6G" class="tableButtonidle menu3" onclick="changeClass3(this)">
STO-6G
</td>
</tr>
</table>
<div id="correlation_consistant" class="RadioButtonidle menu2" title="correlation_consistant" style="Top: 48px; left: 190px;" onclick="changeClass2(this)">
</div>
<div id="RadioOption" style="Top: 40px; left: 215px;">
<p>Correlation-Consistant</p>
</div>
<table id="correlation_consistant_DB" class="dialog" align="center" cellpadding="4" cellspacing="12" style="display: none;">
<tr>
<td cellid="apr-cc-pV(Q+d)Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
apr-cc-pV(Q+d)Z
</td>
<td cellid="aug-cc-pCV5Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCV5Z
</td>
<td cellid="aug-cc-pCVDZ" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCVDZ
</td>
<td cellid="aug-cc-pCVQZ" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCVQZ
</td>
<td cellid="aug-cc-pCV(T+d)Z" class="tableButtonidle menu3" onclick="changeClass3(this)">
aug-cc-pCV(T+d)Z
</td>
</tr>
</table>
<input id="basis_cancel" class="standardButtonidle" type="button" value="Cancel" style="bottom: 10px; right: 70px; float: right;" onclick="changeClass4('STO-2G');changeClass5('correlation_consistant');"/>
<input id="basis_ok" class="standardButtonidle" type="button" value="Done" style="bottom: 10px; right: 10px; float: right;"/>
</div>
Thanks a lot
You can use real radio buttons in your table.
But let me answer you question.
The main thing you're looking for, is this (see code)
<style>
#my_table td {
width: 100px;
cursor: pointer; /* (anything) clickable, better change the cursor */
}
#my_table td.red {
background-color: red;
}
#my_table td.green {
background-color: green;
}
#my_table td.blue {
background-color: blue;
color: white;
}
</style>
<table id="my_table">
<tr>
<td id="red1" class="red">1</td><td id="green1" class="green">2</td><td id="blue1" class="blue">3</td>
</tr>
<tr>
<td id="red2" class="red">4</td><td id="green2" class="green">5</td><td id="blue2" class="blue">6</td>
</tr>
<tr>
<td id="red3" class="red">7</td><td id="green3" class="green">8</td><td id="blue3" class="blue">9</td>
</tr>
</table>
<div id="display"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// make an onClick event
$('#my_table td').click(function(e) {
// inside the onClick. the <td> that was clicked upon is set to the variable this ( or $(this) if you need jQuery functions)
var clicked_on_cell = $(this);
// now lets read some properties: the innerHTML, the class and the index; and we display it in <div id="display"></div>
var index = $(this).index('#my_table td') // finds which of the cels it is. zero based !
var html = clicked_on_cell.html();
var className = clicked_on_cell.attr('class');
var id = clicked_on_cell.attr('id');
$('#display').html(
'innerHTML: ' + html
+ '<br>Class: ' + className
+ '<br>id: ' + id
+ '<br>index: ' + index
);
})
});
</script>
Related
So, I am trying to create a website using Shopify. I tried to edit the code and add three tabs in the product page. 1 Tab will be the description the other is Size chart and the other is reviews. I was able to put the description and reviews in the tab but when I put the size chart and look the website from the phone the size chart doesnt fit. So I wanted to create e horizonal scroll for the table.
Below is the html, CSS and Java code that I put in the product-template.liquid, theme.css, theme.java respectively. Below you can see a picture of the tabs:
Website picture
I used this code to create the review tabs.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab-content
{
display:none;
}
.tab-content.active
{
display:block;
}
ul.tabs
{
list-style-type: none;
padding:0;
margin-left:0;
}
li.tab
{
display:inline-block;
padding:10px 15px;
cursor: pointer;
}
li.tab.active
{
color:grey;
border-bottom:1px solid red;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab" data-content-id="Description">tab 1</li>
<li class="tab" data-content-id="Size chart">tab 2</li>
<li class="tab" data-content-id="Reviews">tab 3</li>
</ul>
<div id="tab-content-1" class="tab-content">content 1</div>
<div id="tab-content-2" class="tab-content">{{product.metafields.meta.sizechart}}</div>
<div id="tab-content-3" class="tab-content">content 3</div>
<script>
tabs= document.querySelectorAll('.tab');
tabContents= document.querySelectorAll('.tab-content');
tabs.forEach(function(tab){
tab.addEventListener('click',function(){
contentId = this.dataset.contentId;
content = document.getElementById(contentId);
tabContents.forEach(function(content){
content.classList.remove('active');
});
tabs.forEach(function(tab){
tab.classList.remove('active');
});
this.classList.add('active');
content.classList.add('active');
});
});
</script>
</body>
</html>
I tried a lot of things to make the horizontal scroll bar. But it still now working. If anyone has any experience with shopify can you please help me.
The table in html:
<div style='overflow-x:auto'>
<table class="t2">
<thead>
<tr>
<td style="width: 54px;" rowspan="2">Size</td>
<td style="width: 112px;" colspan="2">Length</td>
<td style="width: 96px;" colspan="2">Waist</td>
<td style="width: 86.6px;" colspan="2">Hip</td>
</tr>
<tr>
<td style="width: 57px;">CM</td>
<td style="width: 55px;">INCH</td>
<td style="width: 39px;">CM</td>
<td style="width: 57px;">INCH</td>
<td style="width: 40px;">CM</td>
<td style="width: 46.6px;">INCH</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 54px;">S</td>
<td style="width: 57px;">100</td>
<td style="width: 55px;">39.37 </td>
<td style="width: 39px;">61</td>
<td style="width: 57px;">24.02 </td>
<td style="width: 40px;">95</td>
<td style="width: 46.6px;">37.40 </td>
</tr>
<tr>
<td style="width: 54px;">M</td>
<td style="width: 57px;">101.5</td>
<td style="width: 55px;">39.96 </td>
<td style="width: 39px;">65</td>
<td style="width: 57px;">25.59 </td>
<td style="width: 40px;">99</td>
<td style="width: 46.6px;">38.98 </td>
</tr>
<tr>
<td style="width: 54px;">L</td>
<td style="width: 57px;">103</td>
<td style="width: 55px;">40.55 </td>
<td style="width: 39px;">69</td>
<td style="width: 57px;">27.17 </td>
<td style="width: 40px;">103</td>
<td style="width: 46.6px;">40.55 </td>
</tr>
<tr>
<td style="width: 54px;">XL</td>
<td style="width: 57px;">104.5</td>
<td style="width: 55px;">41.14 </td>
<td style="width: 39px;">73</td>
<td style="width: 57px;">28.74 </td>
<td style="width: 40px;">107</td>
<td style="width: 46.6px;">42.13</td>
</tr>
</tbody>
</table>
</div>
Add This CSS & Check Updated HTML
.table-outer{
overflow: auto;
}
.table-outer table{
min-width:600px;
}
.tab-content
{
display:none;
}
.tab-content.active
{
display:block;
}
ul.tabs
{
list-style-type: none;
padding:0;
margin-left:0;
}
li.tab
{
display:inline-block;
padding:10px 15px;
cursor: pointer;
}
li.tab.active
{
color:grey;
border-bottom:1px solid red;
}
.table-outer{
overflow: auto;
padding:0 20px;
}
.table-outer table{min-width:600px;}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul class="tabs">
<li class="tab" data-content-id="Description">tab 1</li>
<li class="tab" data-content-id="Size chart">tab 2</li>
<li class="tab" data-content-id="Reviews">tab 3</li>
</ul>
<div id="tab-content-1" class="tab-content">content 1</div>
<div id="tab-content-2" class="tab-content" style="display:block;"><div class="table-outer"><div style='overflow-x:auto'>
<table class="t2">
<thead>
<tr>
<td style="width: 54px;" rowspan="2">Size</td>
<td style="width: 112px;" colspan="2">Length</td>
<td style="width: 96px;" colspan="2">Waist</td>
<td style="width: 86.6px;" colspan="2">Hip</td>
</tr>
<tr>
<td style="width: 57px;">CM</td>
<td style="width: 55px;">INCH</td>
<td style="width: 39px;">CM</td>
<td style="width: 57px;">INCH</td>
<td style="width: 40px;">CM</td>
<td style="width: 46.6px;">INCH</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 54px;">S</td>
<td style="width: 57px;">100</td>
<td style="width: 55px;">39.37 </td>
<td style="width: 39px;">61</td>
<td style="width: 57px;">24.02 </td>
<td style="width: 40px;">95</td>
<td style="width: 46.6px;">37.40 </td>
</tr>
<tr>
<td style="width: 54px;">M</td>
<td style="width: 57px;">101.5</td>
<td style="width: 55px;">39.96 </td>
<td style="width: 39px;">65</td>
<td style="width: 57px;">25.59 </td>
<td style="width: 40px;">99</td>
<td style="width: 46.6px;">38.98 </td>
</tr>
<tr>
<td style="width: 54px;">L</td>
<td style="width: 57px;">103</td>
<td style="width: 55px;">40.55 </td>
<td style="width: 39px;">69</td>
<td style="width: 57px;">27.17 </td>
<td style="width: 40px;">103</td>
<td style="width: 46.6px;">40.55 </td>
</tr>
<tr>
<td style="width: 54px;">XL</td>
<td style="width: 57px;">104.5</td>
<td style="width: 55px;">41.14 </td>
<td style="width: 39px;">73</td>
<td style="width: 57px;">28.74 </td>
<td style="width: 40px;">107</td>
<td style="width: 46.6px;">42.13</td>
</tr>
</tbody>
</table>
</div></div></div>
<div id="tab-content-3" class="tab-content">content 3</div>
<script>
tabs= document.querySelectorAll('.tab');
tabContents= document.querySelectorAll('.tab-content');
tabs.forEach(function(tab){
tab.addEventListener('click',function(){
contentId = this.dataset.contentId;
content = document.getElementById(contentId);
tabContents.forEach(function(content){
content.classList.remove('active');
});
tabs.forEach(function(tab){
tab.classList.remove('active');
});
this.classList.add('active');
content.classList.add('active');
});
});
</script>
</body>
</html>
I am trying to setup a some radio buttons were there will be options and then a auto delivery button. What I am trying to do is when the selection is clicked then step 2 if click the auto delivery is clicked it will select the auto delivery option.
<table class="table">
<tbody>
<tr>
<td style="vertical-align: middle; border: none;">
<input class="big" id="1bot" type="radio" name="itemChoice" value="">
</td>
<td style="vertical-align: middle; border: none;">
<p><span>1 bottles</span></p>
</td>
</tr>
<tr>
<td style="vertical-align: middle; border: none;">
<input class="big auto" type="checkbox" name="auto" value="">
</td>
<td style="vertical-align: middle; border: none;">
<p><span>Auto</span></p>
</td>
</tr>
<tr>
<td style="vertical-align: middle; border: none;">
<input class="big" id="bot1auto" type="radio" name="" value="">
</td>
<td style="vertical-align: middle; border: none;">
<p><span>Auto Delivery Confirmed!</span></p>
</td>
</tr>
</tbody>
</table>
Here is where I am jQuery wise.
<script type="text/javascript">
$('input[type=radio][name=auto]').change(function() {
var autoYes = $('.auto').prop( "checked", true );
var autoNo = $('.auto').prop( "checked", false );
if ( ( autoYes && $('input[type=radio][name=1bot]').prop('checked',true) ) ) {
$('#bot1auto').prop('checked', true);
});
}
});
</script>
So I would like to have it toggle depending if the auto delivery box is checked or not
I need some CSS/jQuery gurus here.
Basically, there are 2 parent divs sitting side by side. First parent div contain a picture and below it contain a table.
Second parent div contain only a table with the style position: absolute;.
Now the thing is, the picture is different in height, so that means the position of the table below it gonna change.
Thus, how can I made the table on the 2nd div align the same with the first table, without changing the HTML structure. Is it possible doing it with jQuery, like grabbing the 1st table position, and apply it to the 2nd table?
Basically here's the structure is:
.picture {
background-color: #000;
width: 550px;
}
.second-table {
position: absolute;
top: 385px;
}
<div class="div1" style = "width: 30%; display: inline-block;">
<div class="picture" style="height: 378px;">
</div>
<table class="shop_attributes1" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>
<div class="div2" style = "width: 50%; display: inline-block;">
<table class="shop_attributes2 second-table" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>
You could use jquery for this, yes. Something like:
var test = $( ".shop_attributes1" );
var position = test.position();
$('.second-table').css('top', position.top);
Here is a jsfiddle of this: https://jsfiddle.net/7wvjra83/1/
Basically you take the position of the first table and set the css for the second one to be aligned. Hope this works for you
I am not too sure if it is what you are looking for, however I hope it could helps:
$('.second-table').css('left', 361);
.picture {
background-color: #000;
width: 550px;
}
.second-table {
position: absolute;
top: 385px;
----------
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1" style = "width: 30%; display: inline-block;">
<div class="picture" style="height: 378px;">
</div>
<table class="shop_attributes1" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>
<div class="div2" style = "width: 50%; display: inline-block;">
<table class="shop_attributes2 second-table" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>
I have to create a 1 page html website.I have already done it in french language now i am trying to add an option at the top of my website to translate language between french or english.
The idea is to have a table which contains a button of flag of France and england (french and english) in first row (something like this:http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using html and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
see this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have all my html like this (it don't contain code for English table but it will have the table of same html code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?
Write all the divs (and put class on them, like for example : .french ) in both languages and then use jQuery as following :
$(document).ready(function(){
$("#frenchFlag").click(function(){ //When you click on the French flag
$(".french").show(); //Show the divs with the class .french
$(".english").hide(); //Hide the divs with the class .english
});
$("#englishFlag").click(function(){ //Same thing
$(".french").hide();
$(".english").show();
});
});
Obviously you'll hide either the divs with the class .french or the divs with .english at the start of the loading of your page (basically in your
$(document).ready(function() {
//Write here, for example if your website is in French by default :
$(".french").show();
$(".english").hide()
});
You could write your HTML like this:
<div id='english' style='display: none'>
[your complete english HTML]
</div>
<div id='french' style='display: block'>
[your complete french HTML]
</div>
And for your buttons:
<img [...] onClick="document.getElementById('english').style.display=none; document.getElementById('french').style.display=block;">
For the french version. The english switches the display attribute, of course.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<button id="bt1">In English</button>
<button id="bt2">In French</button>
<div>
<div id="one">
<table style="width:50%">
<tr>
<th>Language</th>
<th>Name</th>
<th>Pattern</th>
</tr>
<tr>
<td>English</td>
<td>c#</td>
<td>MVC</td>
</tr>
<tr>
<td>English</td>
<td>Java</td>
<td>J2EE</td>
</tr>
<tr>
<td>English</td>
<td>.Net</td>
<td>MVC4</td>
</tr>
</table>
</div>
<div id="two" style="display:none">
<table style="width:50%">
<tr>
<th>Language</th>
<th>Name</th>
<th>Pattern</th>
</tr>
<tr>
<td>French</td>
<td>PHP</td>
<td>MVC</td>
</tr>
<tr>
<td>French</td>
<td>Java</td>
<td>J2EE</td>
</tr>
<tr>
<td>French</td>
<td>.Net</td>
<td>MVC4</td>
</tr>
</table>
</div>
</div>
<script>
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
document.getElementById('bt1').addEventListener('click',function(e){
swap('one','two');
});
document.getElementById('bt2').addEventListener('click',function(e){
swap('two','one');
});
</script>
</body>
</html>
Instead of button you can replace your image.
<div id="bt1" ><img src="english.png" alt="Smiley face" height="20" width="20"></div>
I'm trying to select an id inside my table for each row.
This is my table(inspected with browser) at the moment.
<table id="sort">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th>Pri </th>
</tr>
</thead>
<tbody style="cursor: n-resize; " class="ui-sortable"><tr class="priorityRow">
<td id="tableDragSort">
<a class="deleteLink" href="#" rel="17904" title="">
<img src="/Content/Images/Garage/DeleteButton.png"></a>
</td>
<td>
<img id="MainContent_MainColContent_ImageRepeater_CarImg_0" class="17904" src="" style="height:45px;width:60px;">
</td>
<td>
<input name="ctl00$ctl00$MainContent$MainColContent$ImageRepeater$ctl00$txtText" type="text" value="hjjj" id="MainContent_MainColContent_ImageRepeater_txtText_0">
</td>
<td class="picturePriority">
1
</td>
</tr><tr class="priorityRow" style="opacity: 1; z-index: 0; ">
<td id="tableDragSort" style="width: 22px; ">
<a class="deleteLink" href="#" rel="17903" title="">
<img src="/Content/Images/Garage/DeleteButton.png"></a>
</td>
<td style="width: 60px; ">
<img id="MainContent_MainColContent_ImageRepeater_CarImg_1" class="17903" src="" style="height:45px;width:60px;">
</td>
<td style="width: 153px; ">
<input name="ctl00$ctl00$MainContent$MainColContent$ImageRepeater$ctl01$txtText" type="text" value="dd" id="MainContent_MainColContent_ImageRepeater_txtText_1">
</td>
<td class="picturePriority" style="width: 21px; ">
2
</td>
</tr><tr class="priorityRow" style="opacity: 1; z-index: 0; ">
<td id="tableDragSort" style="width: 22px; ">
<a class="deleteLink" href="#" rel="17895" title="">
<img src="/Content/Images/Garage/DeleteButton.png"></a>
</td>
<td style="width: 60px; ">
<img id="MainContent_MainColContent_ImageRepeater_CarImg_2" class="17895" src="" style="height:45px;width:60px;">
</td>
<td style="width: 153px; ">
<input name="ctl00$ctl00$MainContent$MainColContent$ImageRepeater$ctl02$txtText" type="text" value="wggw" id="MainContent_MainColContent_ImageRepeater_txtText_2">
</td>
<td class="picturePriority" style="width: 21px; ">
3
</td>
</tr>
</table>
The id which here is 17904, 17903 and 17895 in both <a rel=""> and <img class=""> is the one I want to select into my javascript method which is here:
$("#sort .priorityRow").each(function ()
{
var index = $(this).index() + 1;
var id = /* SELECT ID HERE */
console.log(id);
$(this).find(".picturePriority span").text(index);
SetPicturePriority(id, index);
});
}
I don't care which way i select the id really, as long as it works.
Anyone able to help? :)
It sounds like maybe you're trying to do this:
$("#sort .priorityRow").each(function () {
var rel = $(this).find("a").first().attr("rel"),
index = this.rowIndex + 1;
$(this).find(".picturePriority").text(index);
SetPicturePriority(rel, index);
});
you can get id like this
var id =$(this).attr("id");