how can get span id from table data in jquery - javascript

I have a table tr and td. In between the table data there is a span that I want to take the ID from.
In my jquery code, it's not returning any value from span id.
How can get span id?
My HTML
<table border="1" id="t1">
<tr>
<td>
<span class="f1" id="111" onclick="subtract();">Subtract</span>
</td>
</tr>
<tr>
<td>
<span class="f2" id="222" onclick="subtract();">Subtract</span>
</td>
</tr>
</table>
My jQuery
$(document).ready(function() {
$("#t1 span").click(function() {
var a = $(this).id();
alert(a);
});
});

Use jQuery's attr method:
var a = $(this).attr('id');
This allows you to take any attribute from any jQuery object element and return its value.
More info in the jQuery attr() Docs

You can simply pass the this in your subtract function:
function subtract(element) {
var a = element.id
console.log(a);
}
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1" onclick="subtract(this);">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2" onclick="subtract(this);">Subtract</span></td>
</tr>
</table>
Another solution is using jQuery .attr():
$('table#t1 span').click(function() {
var a = $(this).attr('id');
console.log(a);
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2">Subtract</span></td>
</tr>
</table>

You can use id property of Element
var a = this.id;

in jQuery, us the attr function to get attributed from HTML elements. http://api.jquery.com/attr/
See working example using your code: https://jsfiddle.net/e2vonuor/

The problem is that you're chaining a non-existent method to a jQuery's $(this) object, id is neither a function nor a method, in either jQuery or DOM: it's a property, of an HTMLElement. So, instead use a valid jQuery method to retrieve the property:
$(document).ready(function () {
$("#t1 span").click(function () {
var a = $(this).prop('id');
alert(a);
});
});
Although you could, certainly, also use attr() in place of prop():
$(document).ready(function () {
$("#t1 span").click(function () {
var a = $(this).attr('id');
alert(a);
});
});
Or use the DOM:
$(document).ready(function () {
$("#t1 span").click(function () {
var a = this.id;
alert(a);
});
});

You either use the inline "onclick" in which case you can send the actual element as a parameter:
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1" onclick="subtract(this);">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2" onclick="subtract(this);">Subtract</span></td>
</tr>
jQuery
function substract(spanElement){
var id = $(spanElement).attr("id");
alert(id);
}
Or you set the click functionality in the document ready:
$(document).ready(function () {
$("#t1 span").click(function () {
var id = $(this).attr("id");
alert(a);
});
});
I also recommend you debug using console.log instead of the alert function. But this is a matter of preference.

Related

QuickSearchJS with ajax call

I'm using QuickSearchJS and it is working as expected until ajax call is made and then it doesn't work. I have tried 2 ways. Is there a way to use it with document.on function or any alternate way?
1st way
$(function () {
var qs = $('input#filterText').quicksearch('#a option')
});
2nd way:
$(document).ready(function() {
$(function () {
var qs = $('input#filterText').quicksearch('#a option')
});
});
According to the documentation you should use qs.cache(); after your ajax call.
var qs = $('input#id_search_list').quicksearch('ul#list_example li');
$('ul#list_example').append('<li>Loaded with Ajax</li>');
qs.cache();
var qs=$('input#search').quicksearch('table tbody td');
$("#append").on("click", function(e) {
$("tr").append('<td>'+$("#search").val()+'</td>');
qs.cache();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.2.0/jquery.quicksearch.min.js"></script>
/* Example form */
<form>
<input type="text" id="search">
<input type="button" id="append" value="ajax">
</form>
/* Example table */
<table>
<tbody>
<tr>
<td>Test cell</td>
<td>Another test cell</td>
</tr>
</tbody>
</table>

How delete a html table row using javascript?

I want to delete a row when i click the glyphicon-trash. I tried many ways but still cant get row index properly.
<table class="table table-bordered" id="table_GemList">
<thead>
<col style="width: 25%">
<col style="width: 25%">
<col style="width: 25%">
<col style="width: 25%">
</thead>
<tbody id="GemListBody">
<tr>
<td>Oval</td>
<td>Red</td>
<td>2.23</td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
<tr>
<td>Box</td>
<td>Pink</td>
<td>2.23</td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
</tbody>
</table>
---------- My code
$(document).on("click", ".glyphicon-trash", function () {
var d = $(this).parentNode.parentNode.rowIndex;
document.getElementById("table_GemList").deleteRow(d);
});
$(this) returns a jQuery object. You can't directly read the properties of the collection's items that way. In fact you shouldn't wrap the element with the jQuery constructor as you don't want to use the jQuery APIs.
var d = this.parentNode.parentNode.rowIndex;
Since you are using jQuery, you can simply use the closest and remove methods.
$(this).closest('tr').remove();
You need to update
var d = $(this).parentNode.parentNode.rowIndex;
document.getElementById("table_GemList").deleteRow(d);
to
$(this).closest("tr").remove();
For reference on closest() - https://api.jquery.com/closest/
For reference on remove() - https://api.jquery.com/remove/
Maybe this helps....
$(document).on("click", ".glyphicon-trash", function ()
{
$(this).closest("tr").remove(); // remove row
});
This should works.
$(document).on("click", ".glyphicon-trash", function () {
$(this).parents('tr:first').remove();
});
you can simply delete the parent in which trash icons is there by below jquery code
$(document).on("click", ".glyphicon-trash", function (){
$(this).parent().parent().remove(); // remove row
});

Getting Value From Table TR id and TD id

I have problems getting id from tr and td in my table.
Let's say I have a table like this:
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
I want to getting id from TR and id FROM td for each tr clicked in specific table (table_tingkat_jual).
This is my syntax in jQuery:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
But when I clicked the row in that table, nothing happened. What I want is alert me the id. (See the alert function).
What's wrong?
Update from chat:
It turns out the problem is that the table is loaded dynamically via ajax, so a delegated event is needed (in addition to the other fixes):
$(document).on('click', '#table_tingkat_jual tr', function (e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
Previous details:
There are several issues, not the least of which is the use of duplicate ID's in the HTML (which is invalid).
You also do not need separate, identical, selectors to handle stopPropogation (assuming you actually need stopPropogation at all (e.g. to avoid clicks in parent objects).
It appears you also want to drill down for the TD values, so try this:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/fw5ty/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
data('id') is a short-cut for attr('data-id').
note I have changed your HTML to use data-id attributes instead of id= so that duplicate values are allowable.
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='1'>1</td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='3'>3</td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
If you really must use duplicate ID's (which I strongly recommend you fix) use this code instead:
http://jsfiddle.net/TrueBlueAussie/fw5ty/1/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $this.find('td[id]').attr('id');
alert("TD ID " + tdid);
});
you have two elements with the same id:
<tr id='0'>
id should be unique. Use a class if you want both to be 0, or assign one a different value.
The issue is that .closest starts looking from the target element and up, not down on the DOM tree, and since your event is on tr it never gets to the td, that's why you always get undefined, if what you want is to get the id of the first td with one, try using .find():
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).find('td[id]').attr('id');
alert("TD ID " + tdid);
});
Sample fiddle
Also I'd get rid of:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
And finally, you're not supposed to have repeated id attributes on html, so you should change those or use a data attribute or a class instead.
Maybe you forgot to include jquery?
I just included jQuery from google and let the script wait until the document is completly loaded.
I also gave the different ids, but that was not the problem i think.
I also recommend giving all the an ID, because now he alerts undefined ID.
For me it works like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
});
</script>
</head>
<body>
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr id='0'>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='1'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='2'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
<body>
</html>
Hope it helps.

Issue related to getting class name in jquery

I have the following HTML:
<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
<tr class="row1">
<td></td>
</tr>
<tr class="row2">
<td></td>
</tr>
</table>
and the following jQuery :
<script>
$(document).ready(function () {
var Tabletr= $(".ChatBox > tbody > tr:odd");
});
</script>
how can i get the class name of Odd row in Jquery?
Simply
var $elems = $("table.ChatBox tr:odd"); should work.
To get their classes(heads up to Juicy Scripter below),
$elems.each(function(){ console.log(this.className); //do whatever with the class names. });
Try this:
<script>
$(document).ready(function () {
var Tabletr= $(".ChatBox").children("td:odd").attr("class");
alert (Tabletr);
}
});
</script>
You can also use :first instead of :odd if you wish to get the first td class.
jQuery itself doesn't provide direct way to retrieve DOM element class other than using attr method of jQuery or className property for element in JavaScript after you get the elements:
$(document).ready(function () {
var Tabletr= $(".ChatBox > tbody > tr:odd");
var firstElementClass = Tabletr.eq(0).attr('class');
// Previous is the same as
var firstElementClass = Tabletr.get(0).className;
// Due to fact that Tabletr may contain more that one row you may want to iterate and collect classes names.
var classes = [];
Tabletr.each(function(){
classes.push(this.className);
// OR
classes.push($(this).attr('class'));
});
});
You can simplify your selector:
var Tabletr = $(".ChatBox tr:odd")
This gives you a jQuery object for each odd row in your table. If there's just one such row, you could do this:
var Tabletr = $('.ChatBox tr:odd')[0].className; // -> "row2"
But if there are multiple rows, you need something more like this:
var TableRowClasses = $(".ChatBox tr:odd").map( function(){
return this.className;
}).get();
This gives you an array with every odd row's class as an element. So you'd end up with an array like this:
["row2","row4","row6"] // confusing odd-row classnames notwithstanding
I've look at your code and the following changes gave me the result your after.
<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
<tr class="row1">
<td></td>
</tr>
<tr class="row2">
<td></td>
</tr>
<tr class="row3">
<td></td>
</tr>
<tr class="row4">
<td></td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$(".ChatBox tr:odd").each(function () {
//test
alert($(this).attr("class"));
});
});
</script>

which jquery selector to do this?

<div id="m101">
<table class="tablec" width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="name">My Name</span></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><span class="clickme">clickme</span></td>
</tr>
</table>
</div>
Which selector should I use to capture the content of "name" if clickme is clicked? There are more than one of those tables with the same classes, but the surrounding divs are unique. The name is different each time.
I've been experimenting the with parent, parents and closest functions so far without luck.
$(".clickme").click(function(){
var name = $(this).closest('.name').text();
alert(name);
});
Would something like this do the trick?
$(".name", $(this).closest("div")).text()
Working example here: http://jsfiddle.net/44re8/
You can traverse the tree up until you hit a <table>:
var name = $( this ).closest( 'table' ).find( '.name' ).text();
You are not able to select the .name using closest() as it is not an ancestor. You would need to select a common ancestor e.g. the table and then work back down the tree to the .name element.
$(".clickme").click(function(){
var table = $(this).closest("table");
var name = table.find('.name').text();
alert(name);
});
You could have this in a single line using
$(".clickme").click(function(){
var name = $(this).closest("table").find('.name').text();
alert(name);
});
This did the work for me
function() {
$(".clickme").click(
function(e) {
alert($(this).parents("div").find(".name").html());
}
);
}
Simplest of answers -
$(document).ready(function(){
$('.clickme').click(function(){
var getName = $('.name').text();
alert(getName);
});
});

Categories