get last value of td whose class is same using jquery - javascript

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>

Related

how can i add space between table border and text using html only?

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>&nbspKeith</u> </TD>
Try using &nbsp 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 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>

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!

jQuery show and hide next div in next <tr>

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>

Jquery Object #<Object> has no method 'getElement'

I have been trying to use set up this table here. http://www.ajaxblender.com/demos/tables/sortabletable/
I checked with my browser and the page is properly pulling the css and the .js files yet it gives me this error in reference to my sortabletable.js file
(screen shot of the error)
http://i.imgur.com/iJa2Rz8.png
Here is a copy of the relevant part of the source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Home page</title>
<link rel="stylesheet" href="./_common/css/main.css" type="text/css" media="all">
<link href="sortableTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./_common/js/mootools.js"></script>
<script type="text/javascript" src="sortableTable.js"></script>
</head>
<body>
<div id="container">
<div id="example">
<div class="tableFilter">
<form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">Filter:
<select id="column">
<option value="1">Firstname</option>
<option value="2">Lastname</option>
<option value="3">Department</option>
<option value="4">Start Date</option>
</select>
<input type="text" id="keyword" />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</div>
<table id="myTable" cellpadding="0" cellpadding="0">
<thead>
<th axis="number">ID</th>
<th axis="string">Firstname</th>
<th axis="string">Lastname</th>
<th axis="string">Department</th>
<th axis="date">Start Date</th>
</thead>
<tbody>
<tr id="1">
<td class="rightAlign">1</td>
<td>Sam</td>
<td>Birch</td>
<td>Programming</td>
<td class="rightAlign">01/06/00</td>
</tr>
<tr id="2">
<td class="rightAlign">2</td>
<td>George</td>
<td>Lo</td>
<td>Support</td>
<td class="rightAlign">01/07/99</td>
</tr>
<tr id="3">
<td class="rightAlign">3</td>
<td>kevin</td>
<td>Walker</td>
<td>Programming</td>
<td class="rightAlign">01/06/05</td>
</tr>
<tr id="4">
<td class="rightAlign">4</td>
<td>Peter</td>
<td>Aland</td>
<td>Project Management</td>
<td class="rightAlign">23/10/06</td>
</tr>
<tr id="5">
<td class="rightAlign">5</td>
<td>Rachel</td>
<td>Dickinson</td>
<td>Design</td>
<td class="rightAlign">20/01/05</td>
</tr>
<tr id="6">
<td class="rightAlign">6</td>
<td>John</td>
<td>Tsang</td>
<td>Support</td>
<td class="rightAlign">05/10/05</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
</script>
</div>
</div>
</div>
</body>
</html>
any thoughts on what it could be?

Use $.find('tbody') to get all descendant tbodys and $.children('tbody') to get all children tbodys. Try this:
this.thead = this.table.children('thead');
this.tbody = this.table.children('tbody');
this.tfoot = this.table.children('tfoot');
this.elements = this.table.find('tr');

Altough I don't see jQuery being loaded in your HTML sample, your question's title suggests that your are using jQuery in your site. If that's the case, your problem would be that there's a conflict between Mootools and jQuery because both libraries defines the $ function. To fix the issue, you will have to use jQuery.noConflict().

Categories

Resources