How can I simplify and consolidate these two click functions into one, and make it scalable for future table row classes? My code works, but it's not very scalable.
See Fiddle: https://jsfiddle.net/49hvfdje/10/
<!DOCTYPE html>
<html>
<head>
<style> .hidden { display: none; } </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.click.a').click(function() {
$('tr.a').toggleClass('hidden'); // toggleClass for A rows
return false;
});
$('a.click.b').click(function() {
$('tr.b').toggleClass('hidden'); // toggleClass for B rows
return false;
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr><td><a class='click a'>Toggle A Rows</a></td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr><td><a class='click b'>Toggle B Rows</a></td></tr>
<tr class='hidden b'><td>Text</td></tr>
<tr class='hidden b'><td>Text</td></tr>
<tr class='hidden b'><td>Text</td></tr>
</tbody>
</table>
</body>
</html>
Related
I am new to programming as to stack overflow so be easy on me. i am making an tic tac toe game and haven't found a to mark a random_cell and append and image to it so if you could help it will be of most help. jquery are also welcome
var x_or_o = ["x","o"];
var user = x_or_o[Math.floor(Math.random()*x_or_o.length)];
function random_cell(){
var cells = ["zero","one","two"];
return ("#"+cell[Math.floor(Math.random()*cells.length)]+"_"+cell[Math.floor(Math.random()*cells.length)]);
}
function clink(id_ele){
$(id_ele).one(("click",water(id_ele)));
}
function water(id_ele){
$(id_ele).click(function(){
if (user == "x"){
$(id_ele).append("<img src =img/x.png>").addClass("done-x");
if (! random_cell.hasClass()){
$(random_cell).append("<img src =img/o.png>");
}
else{
random_cell();
water(id_ele);
}
}
else if (user == "o"){
$(id_ele).append("<img src =img/o.png>").addClass("done-o");
}
}
)
}
clink("#zero_zero");
clink("#zero_one");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1>TIC TAC TOE</h1>
</header>
<section>
<table>
<tr>
<td id = "zero_zero"></td>
<td id = "one_zero"></td>
<td id = "two_zero"></td>
</tr>
<tr>
<td id = "zero_one"></td>
<td id = "one_one"></td>
<td id = "one_two"></td>
</tr>
<tr>
<td id = "two_zero"></td>
<td id = "two_one"></td>
<td id = "two_two"></td>
</tr>
</table>
</section>
<footer>
<p>© Kunal Mehta 2016</p>
<img src="img/facebook.png" alt="">
<img src="img/twitter.png" alt="">
</footer>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You can simply use Math.random() to create numbers and then build a little translation for your ids, as you did. But note that your current ids makes no sense. They're inconsistent. I've changed them a bit to be usefull.
Also note, that your array in random_cell is called cells, but in your random creation you uses cell. This will not work too.
function random_cell() {
var cells = ["zero","one","two"];
var length = cells.length;
return ("#" + cells[Math.floor(Math.random()*length)] +
"_" + cells[Math.floor(Math.random()*length)]);
}
setInterval(function() {
var id = random_cell();
$("td").removeClass("highlight");
$(id).addClass("highlight")
}, 500);
.highlight {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="zero_zero">1</td>
<td id="one_zero">2</td>
<td id="two_zero">3</td>
</tr>
<tr>
<td id="zero_one">4</td>
<td id="one_one">5</td>
<td id="two_one">6</td>
</tr>
<tr>
<td id="zero_two">7</td>
<td id="one_two">8</td>
<td id="two_two">9</td>
</tr>
</table>
Your random_cell function does the following:
return ("onecell");
Thats wrong syntax. Do:
return "onecell";
The next mistake:
$(random_cell).append(...);
Random_cell is not a Variable !!! Its a function. Do:
$( random_cell() ).append(...);
Mistake No.3:
The clink function adds an eventlistener that adds an eventlistener. So you have to click it twice to make it work...
Mistake No.4
<img src=img.jpg >
Thats wrong HTML. Do:
<img src='img.jpg'>
I am trying attribute a event to cells of differents columns of my bootstrap table.
The problem is: Although I have set a class to each column, the events attributed to this classes are not fired. I still tried set a class to each div added in cells, but its event also wasn't fired.
So, how can I get a td event using bootstrab table?
Here is the complete code for td click event for bootstap table
$(document).ready(function(){
$('table td').click(function(){
alert($(this).html());
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>Click on the td below</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Until you are showing us some code, you can try this,
$('body').on('click', '#tableID tr td', function(){
//whenever any td is clicked, this function will get called
});
you can change 'click' with whatever event name you want to bind your td with.
I am delegating the event to body, because if you dynamically add your table elements to your html, direct binding to those events will not fire/work.
try This
$("#boottable").on('all.bs.table', function (e, name, args) {
console.log(name, args);
});
How can I transform all text links in a page into actual links?
For example, I want to change all text links like this:
<p>http://www.google.com</p>
or in a table like this:
<td>http://www.google.com</td>
into this:
http://www.google.com
and this:
<td>http://www.google.com</td>
This is what you need:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function createLinks(){
$('p, td').filter(function() {
return this.innerHTML.match(/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,#?^=%&:/~\+#]*[\w\-\#?^=%&/~\+#])?/);
}).each(function(){
var link = $('<a>', { href: this.innerHTML,
text: this.innerHTML });
if(this.tagName == "P")
this.parentNode.replaceChild(link[0], this);
else{
this.removeChild(this.childNodes[0])
this.appendChild(link[0]);
}
});
}
$(document).ready(function(){
$('#create_links').click(function(){
createLinks();
});
});
</script>
<style>
a{
display:block;
}
</style>
</head>
<body>
<p>This shouldn't became a link</p>
<p>http://www.thisshouldbecamealink.com</p>
<p>http://www.anotherlink.com</p>
<table>
<tr>
<td>Not a link</td>
</tr>
<tr>
<td>http://www.validlink.com</td>
</tr>
</table>
<button id="create_links">Create links</button>
</body>
</html>
I need to be able to create a hyperlink dynamically on mouseover and remove it on mouseout event. However, when the mouse goes over the link I need it to not behave as if it is mouseout. When this happens the events goes into infinite loop. See example below:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
var editTag = document.createElement('a');
editTag.appendChild(document.createTextNode("test2"));
editTag.setAttribute('name', 'test2');
editTag.setAttribute('id', 'lnkEdit');
editTag.setAttribute('href', '#');
editTag.setAttribute('style', 'float:right;');
tcell.appendChild(editTag);
}
function hideEdit(tcell) {
//var tcell = document.getElementById("tcAdd");
var lnk = document.getElementById("lnkEdit");
tcell.removeChild(lnk);
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
</td>
</tr>
</table>
</div>
</body>
</html>
Put the cursor on test1 and test2 to see the difference.
I think I am missing something obvious.
Well, I don't know if you want like this, but it works:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
document.getElementById("lnkEdit").style.display="inline";
}
function hideEdit(tcell) {
document.getElementById("lnkEdit").style.display="none";
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
test2
</td>
</tr>
</table>
</div>
</body>
</html>
It's a simpler way than using DOM. But if you want to use DOM, I can take another try =)
I don't understand why the vertical scroll bar moves automatically to the most top position when "Line 9" clicked, for example. Further clicks does not move the scroll bar. Could anyone explain why, and how to fix this ?
I work with Firefox 3.6.3.
HTML:
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" src="test.js"></script>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
JS:
$(document).ready(function() {
$(".column1").each(function(index) {
$(this).after("<td class='column2'>Details " + index + "</td>");
$(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") },
function() { $("[row='" + index + "'] .column2").fadeOut("fast") });
});
});
CSS:
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
width: 100px;
background-color: green;
color: white;
}
.column2 {
display: none;
width: 200px;
background-color: blue;
color: white;
}
After doing some trial and error tests, it looks like this is related to the moment that the browser recalculates and redraws the table when you fade in/fade out one of the cells. There's nothing wrong with your code, and jQuery is correctly toggling the 'display' property of the cell - it looks like it's a minor bug in FF.
Probably the easiest way around it is to avoid toggling table cells themselves, and instead toggle the contents of the column2 cell, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$("td.column1").each(function(index) {
$(this).after('<td class="column2"><span class="details">Details ' + index + '</span></td>');
$(this).toggle(
function(){$(this).siblings('.column2').children('span.details').fadeIn("fast")},
function(){$(this).siblings('.column2').children('span.details').fadeOut("fast")}
)
});
});
</script>
<style type="text/css" media="screen">
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
}
.column2 .details{
display:none;
}
</style>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
So, the script adds the column2 cell, and that stays visible the whole time - instead we show/hide the <span class="details"> within it. I've tested this version in FF 3.6.3 and it behaves as it should!
Oh - and I cleaned up your jQuery selectors for better performance. If you want more info on why, let me know!
I copied and tried your code, on Firefox 3.6.3 and Chrome 5.0.375.29. And saw nothing what you described so I am at loss.
Scrollbar moved only when scrolling normally, not when clicking on the text.