jQuery show and hide next div in next <tr> - javascript

I want show and hide div with below code and the problem I cant find the toggle_container div any help
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(".toggle_container").hide();
$("a.showdiv").click(function(){
$(this).toggleClass("actives").parent().parent().next().slideToggle("fast");
if ($.trim($(this).text()) === 'Detail+') {
$(this).text('Details-');
} else {
$(this).text('Detail+');
}
return false;
});
$("a[href='" + window.location.hash + "']").parent(".showdiv").click();
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td> 1 </td>
<td> 2</td>
<td> 2 </td>
<td>3</td>
<td> 0 </td>
<td></td>
<td>Details+</td>
</tr>
<tr>
<td colspan="7"><div class="toggle_container"> content here </div></td>
</tr>
</tbody>
</table>
</body>
</html>
I want show and hide div with below code and the problem I cant find the toggle_container div any help


Instead of this:
$(this).toggleClass("actives").parent().parent().next().slideToggle("fast");
try this:
$(this).toggleClass("actives").closest("table").find(".toggle_container").slideToggle("fast");


You should try:
$(this).parents("tr").next().find(".toggle_container").slideToggle("fast").toggleClass("actives");
Tell me if it works.


You have not written ready function.
Here is the working example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$(".toggle_container").hide();
$("a.showdiv").click(function(){
$(this).toggleClass("actives").closest("table").find(".toggle_container").slideToggle("fast");
if ($.trim($(this).text()) === 'Detail+') {
$(this).text('Details-');
} else {
$(this).text('Detail+');
}
return false;
});
$("a[href='" + window.location.hash + "']").parent(".showdiv").click();
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td> 1 </td>
<td> 2</td>
<td> 2 </td>
<td>3</td>
<td> 0 </td>
<td></td>
<td>Details+</td>
</tr>
<tr>
<td colspan="7"><div class="toggle_container"> content here </div></td>
</tr>
</tbody>
</table>
</body>
</html>

Related

How to target a table based on ID, in order to iterate through its td-spans, and change spans color aswell as give out its value to console

I would like to target with JQuery a Table id, and iterate through this specific Table td-spans, in order to change spans color to red and also give out to it's value to console.
I tried the following Code, but the style property didn't work, nor did console.log()
$("span").each(function(index){
this.style.color="red"
console.log(this.innerHTML);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jquery</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table id="IDTable">
<tr>
<td>
<span>Hallo Welt</span>
</td>
</tr>
<tr>
<td>
<span>Hallo1</span>
</td>
</tr>
<tr>
<td>
<span>Hallo3</span>
</td>
</tr>
</table>
</body>
</html>

Your code is missing a closing );
Try the following.
$("#IDTable span").each(function(index){
this.style.color="red"
console.log(this.innerHTML);
});
The difference is the last line, where i'm closing the each function.

Try like this
$("#IDTable tr td span")
$("#IDTable tr td span").each(function(index){
this.style.color="red";
console.log(this.innerHTML);
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jquery</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table id="IDTable">
<tr>
<td>
<span>Hallo Welt</span>
</td>
</tr>
<tr>
<td>
<span>Hallo1</span>
</td>
</tr>
<tr>
<td>
<span>Hallo3</span>
</td>
</tr>
</table>
</body>
</html>

$("#IDTable td span").each(function(index){
this.style.color="red"
console.log(this.innerHTML);
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jquery</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table id="IDTable">
<tr>
<td>
<span>Hallo Welt</span>
</td>
</tr>
<tr>
<td>
<span>Hallo1</span>
</td>
</tr>
<tr>
<td>
<span>Hallo3</span>
</td>
</tr>
</table>
</body>
</html>

how to same result on textbox 2 when added value from select value in popup in javascript

help me, for the same result in textboxt result when i added value on textbox nilai 1 from popup,
I am confused what event should I use in java script for my case.
I tried using onChange event but it didn't work
here is my code
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method='post' action='' name='myF'>
Nilai 1 : <input type=text name='nilai1' id='nilai1' size='20' onchange="sameresult()">
<a href="javascript:void(0);" NAME="My Window Name" title=" My title here "
onClick='javascript:window.open("pop_up.html","Ratting",
"width=550,height=170,left=150,top=200,toolbar=1,status=1,");'> Cari</a>
<br>
<br>
Result :<input type=text name='result' id='result' size='20'>
</form>
<script langauge="javascript">
function sameresult(){
var a = document.getElementById('nilai1');
var result = document.getElementById('result');
result.value = a.value;
}
</script>
</body>
</html>
pop_up.html
<html>
<head>
<script langauge="javascript">
function post_value(s){
opener.document.getElementById('nilai1').value = s;
self.close();
}
</script>
<title>Popup</title>
</head>
<body>
<table border='1'>
<tr>
<td>No</td>
<td>Value</td>
<td>Action</td>
</tr>
<tr>
<td>1</td>
<td>200</td>
<td>Select</td>
</tr>
<tr>
<td>2</td>
<td>300</td>
<td>Select</td>
</tr>
</form>
</body>
</html>

you can use onkeypress event like
Nilai 1 : <input type=text name='nilai1' id='nilai1' size='20' onkeypress="sameresult()">

Aurelia.js how to add a new row in a table? without use jquery

how can I add a new row in a table? using Aurelia.js without use jquery.
will be possible do this just with Aurelia.js ?
export class App {
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<table>
<tr>
<td>
elem 1
</td>
<td> elem 2</td>
<td> elem 3</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-info">Add</button>
</td>
</tr>
</table>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>

As the thebluefox said, you're far way from having something working. You should read the docs and learn some basics.
Anyway, the answer you're looking for is:
<tr repeat.for="item of items">
<td>${item.property1}</td>
<td>${item.property2}</td>
<td>${item.property3}</td>
<td>${item.property4}</td>
</tr>
Now, every time you push an object into items, a new line in the table will be created.
Hope this helps!

Clearing/Emptying the previous TD value when a new option value is selected in the select box

I really need your help, how can the existing code be modified below such that upon selecting another option value from the select box, the previous <td> text value in the table should be cleared.
Here is an pic of the problem:
Here is the HTML Markup and code in question:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
* {
font-family: Arial;
font-size: 9pt;
}
</style>
<script type="text/javascript">
window.onload = function() {
$(document).on('click', '.ufield', function() {
if($(this).find('select').length == 0) {
$(this).append("<select><option value=''></option><option value='ADMIN'>ADMIN</option><option value='USER'>USER</option></select>");
}
});
$(document).on('change', '.ufield select', function(){
var myValue = $(this).val();
var $parent = $(this).parent();
$(this).remove();
$parent.append(myValue);
});
}
</script>
</head>
<body>
<table style="width: 100%">
<tr>
<td>User ID:</td>
<td>JSMITH</td>
<td>Branch:</td>
<td>TESTA</td>
</tr>
<tr>
<td>Access:</td>
<td class="ufield" id="access"></td>
<td>Floor:</td>
<td>12</td>
</tr>
<tr>
<td>Account Status:</td>
<td>active</td>
<td>Office:</td>
<td>D5656</td>
</tr>
<tr>
<td>Last Login:</td>
<td>30/08/2016 4:16 PM</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Firstname:</td>
<td>John</td>
<td>Address:</td>
<td>175 Yahoo Lane</td>
</tr>
<tr>
<td>Lastname:</td>
<td>Smith</td>
<td>Province:</td>
<td>Ontario</td>
</tr>
<tr>
<td>Telephone:</td>
<td>123-456-7891</td>
<td>City:</td>
<td>Niagra Falls</td>
</tr>
<tr>
<td>Fax:</td>
<td>613-990-1301</td>
<td>Country:</td>
<td>Canada</td>
</tr>
<tr>
<td>E-mail:</td>
<td>john_smith#yahoo.ca</td>
<td>Postal Code:</td>
<td>90210</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

$(this).remove(); ------> $(this).closest("td").prev().empty();

This did the trick, modify the following section:
$(document).on('click', '.ufield', function() {
if ($(this).html()) {
$(this).empty()
}
$(this).append("<select><option value=''></option><option value='ADMIN'>ADMIN</option><option value='USER'>USER</option></select>");
//if($(this).find('select').length == 0) {}
});

get last value of td whose class is same using jquery

I am working with jQuery. I have a html code like :
<table>
<tr>
<td class="price">price</td>
<td class="total">10 Rs</td>
</tr>
<tr>
<td class="price">Total:</td>
<td class="total">100 Rs</td>
</tr>
</table>
Now, I want only total price amount as 100 Rs. So what code should I have to write to resolve this?

try this
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>last demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table>
<tr>
<td class="price">price</td>
<td class="total">10 Rs</td>
</tr>
<tr>
<td class="price">Total:</td>
<td class="total">100 Rs</td>
</tr>
</table>
<script>
alert($( "tr td:last" ).text());
</script>
</body>

Categories

Resources