Contenteditable not working in java script - javascript

What I am trying to do is to set row editable on button click.
$(":button").click(function(){
var tdvar=$(this).parent('tr').find('td');
$.each(tdvar,function(){
$(this).prop('contenteditable',true);
});
});
<s:iterator value="arr">
<tr>
<td contenteditable="false"><s:property value="%{productname}"/></td>
<td contenteditable="false"><s:property value="%{category}"/></td>
<td contenteditable="false"><s:property value="%{price}"/></td>
<td contenteditable="false"><s:property value="%{stock}"/></td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
<td><button class="edt">edit</button>
</td>
</tr>
</s:iterator>


Find parent().parent('tr')
$("button").click(function() {
var tdvar = $(this).parent().parent('tr').find('td'); //change on this line
$.each(tdvar, function() {
$(this).prop('contenteditable', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td contenteditable="false"><s:property value="%{productname}" /></td>
<td contenteditable="false"><s:property value="%{category}" />1</td>
<td contenteditable="false"><s:property value="%{price}" />2</td>
<td contenteditable="false"><s:property value="%{stock}" />3</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
<td>
<button class="edt">edit</button>
</td>
</tr>
</table>

Related

HTML:Highlight selected link or label

In my Html Page I need to keep the link selected when i click on it:
The HTML Code:
<table class="main-dev">
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelA
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelB
</a>
</td>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelC
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelD
</a>
</td>
</tr>
</table>
The Other option is to change the link with simple label, and need to keep the label selected when click on it:
The Html code will be:
<table class="main-dev">
<tr>
<td>
labelA
</td>
</tr>
<tr>
<td>
labelB
</td>
</td>
</tr>
<tr>
<td>
labelC
</td>
</tr>
<tr>
<td>
labelD
</td>
</tr>
</table>

you can do this easily with JQ . see snippet below
if you want to remove selected class when click again on the same link, change addClass to toggleClass
var link = $(".titleForm")
$(link).on("click",function() {
var otherLinks = $(this).parents("tr").siblings().find(".selected")
$(this).addClass("selected")
$(otherLinks).removeClass("selected")
})
.selected {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="main-dev">
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelA
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelB
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelC
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelD
</a>
</td>
</tr>
</table>

Search table and return correct table rows on button click using javascript/jQuery and the contents of the 'search' bar

Basically I currently have a search bar that works using a .keyup() function and the correct row/s are returned and the others hidden as the user enters a value. I am trying to learn how to do this (using .click() but my jQuery/javascript knowledge isn't too strong). Can someone help me adapt my current function to work so that the contents of the search bar is only used to search the table when the search button is clicked and not as a user is typing. Thanks a lot in advance.
HTML:
<h2>Customer Data</h2>
<p>Below shows all the relevant customer data, rows can be edited, added, removed and moved up and down in the table.</p>
<div id="table" class="table-editable" style="width:1000px; text-align: left;">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<thread>
<tr>
<th width="300">Customer Name</th>
<th width="250">Postcode</th>
<th width="200">Telephone No</th>
<th width="150">Remove</th>
<th width="100">Adjust Row</th>
</tr>
</thread>
<tbody>
<tr>
<td width="300"><div contenteditable>Adam Greenwood</div>
<td width="250"><div contenteditable>GU17 0DL</div>
<td width="200"><div contenteditable>01252445567</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Sam Test</div>
<td width="250"><div contenteditable>GU47 7GR</div>
<td width="200"><div contenteditable>01276122047</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Mark Colin</div>
<td width="250"><div contenteditable>YA32 3DM</div>
<td width="200"><div contenteditable>44+7449929147</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Frank Wright</div>
<td width="250"><div contenteditable>SF65 7YY</div>
<td width="200"><div contenteditable>00866451340</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Arnold Carrol</div>
<td width="250"><div contenteditable>LE22 2WQ</div>
<td width="200"><div contenteditable>05429552095</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Thomas Gallagher</div>
<td width="250"><div contenteditable>YL66 7FF</div>
<td width="200"><div contenteditable>94232520682</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Stephen Major</div>
<td width="250"><div contenteditable>SA12 6TG</div>
<td width="200"><div contenteditable>54295650429</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Neil Reynolds</div>
<td width="250"><div contenteditable>MU70 6XC</div>
<td width="200"><div contenteditable>40768991327</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Jeff Reinbold</div>
<td width="250"><div contenteditable>RG10 7HM</div>
<td width="200"><div contenteditable>01865439</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td width="300"><div contenteditable>Empty</div>
<td width="250"><div contenteditable>Empty</div>
<td width="200"><div contenteditable>Empty</div>
<td width="150"><span class="table-remove glyphicon glyphicon-remove"></span></td>
<td width="100"><span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</tbody>
</table>
<input type="text" id="search" placeholder="Type to search..." />
<br />
<br />
<button>Search</button>
</div>
Search Function:
<script>
$("#search").keyup(function(){
_this = this;
$.each($("#table tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
</script>

First, add an ID to your search button :
<button id="search-button">Search</button>
Then add the click event to your jQuery code.
Try this :
$("#search-button").click(function(){
$.each($("#table tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($('#search').val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Customer Data</h2>
<p>Below shows all the relevant customer data, rows can be edited, added, removed and moved up and down in the table.</p>
<div id="table" class="table-editable" style="width:1000px; text-align: left;">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<thread>
<tr>
<th width="300">Customer Name</th>
<th width="250">Postcode</th>
<th width="200">Telephone No</th>
<th width="150">Remove</th>
<th width="100">Adjust Row</th>
</tr>
</thread>
<tbody>
<tr>
<td width="300"><div contenteditable>Adam Greenwood</div>
<td width="250"><div contenteditable>GU17 0DL</div>
<td width="200"><div contenteditable>01252445567</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Sam Test</div>
<td width="250"><div contenteditable>GU47 7GR</div>
<td width="200"><div contenteditable>01276122047</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Mark Colin</div>
<td width="250"><div contenteditable>YA32 3DM</div>
<td width="200"><div contenteditable>44+7449929147</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Frank Wright</div>
<td width="250"><div contenteditable>SF65 7YY</div>
<td width="200"><div contenteditable>00866451340</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Arnold Carrol</div>
<td width="250"><div contenteditable>LE22 2WQ</div>
<td width="200"><div contenteditable>05429552095</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Thomas Gallagher</div>
<td width="250"><div contenteditable>YL66 7FF</div>
<td width="200"><div contenteditable>94232520682</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Stephen Major</div>
<td width="250"><div contenteditable>SA12 6TG</div>
<td width="200"><div contenteditable>54295650429</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Neil Reynolds</div>
<td width="250"><div contenteditable>MU70 6XC</div>
<td width="200"><div contenteditable>40768991327</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<tr>
<td width="300"><div contenteditable>Jeff Reinbold</div>
<td width="250"><div contenteditable>RG10 7HM</div>
<td width="200"><div contenteditable>01865439</div>
<td width="150">
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td width="100">
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td width="300"><div contenteditable>Empty</div>
<td width="250"><div contenteditable>Empty</div>
<td width="200"><div contenteditable>Empty</div>
<td width="150"><span class="table-remove glyphicon glyphicon-remove"></span></td>
<td width="100"><span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</tbody>
</table>
<input type="text" id="search" placeholder="Type to search..." />
<br />
<br />
<button id="search-button">Search</button>
</div>

Let's start adding an id attribute to your search button:
<button id="doSearch">Search</button>
Then in your javascript function just bind a closure on the button click event:
$("doSearch").on('click', function() {
var needle = $('#search').val().toLowerCase();
$.each($("#table tbody tr"), function() {
var haystack = $(this).text().toLowerCase();
if(haystack.indexOf(needle) == -1)
$(this).hide();
else
$(this).show();
});
});
In the code above I've even made a little improvement saving the "needle" value just once. In your snippet everytime $.each loops it has to find the DOM element, get the value and make it lowercase.

id to add search button
<button id="btn_search">Search</button> //add id
.find('td:eq(0)') gets the value of the column of the table (name)
$("#btn_search").on('click', function() {
$("table tbody tr").each(function(index) {
if($(this).find('td:eq(0)').text().toLowerCase().indexOf($('#search').val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
})

Accessing html child elements using php

<table id="rr" class="table mobile table-bordered">
<tr class="data " id="abc1235">
<td>
<span class="label tip-top files-count" data-original- title="Filesin">1</span>
</td>
<td colspan="1">
<a class="tname " href="/file/123/0">User12</a>
</td>
<td class="tprogress">
<span class="label size tip-top" data-original-title="Size">18.2 MB</span>
</td>
<td>
<!--actions-->
</td>
</tr>
<tr class="data" id="abc12356">
<td>
<span class="label tip-top files-count" data-original-title="Files in">1</span>
</td>
<td colspan="1">
<a class="tname " href="/file/123/1">Hi user </a>
</td>
<td class="tprogress">
<span class="label size tip-top" data-original-title="Size">18.2MB</span>
</td>
<td>
<!--actions-->
</td>
</tr>
</table>
Using php i want to get the info in this format
Name:User12
id:abcd12345
Name:Hi user
id:abc12356
So far what i did is
foreach($dom->getElementsByTagName('tr') as $link) {
echo $link->getAttribute('id');
echo "<br />";
}
this only gets first Value i need to go inside and get the text of a tag

Ignoring the spurious extra spaces in the html above the following ought to get what you are needing.
<?php
$strhtml='
<table id="rr" class="table mobile table-bordered">
<tr class="data" id="abc1235">
<td>
<span class="label tip-top files-count" data-original-title="Filesin">1</span>
</td>
<td colspan="1">
<a class="tname" href="/file/123/0">User12</a>
</td>
<td class="tprogress">
<span class="label size tip-top" data-original-title="Size">18.2 MB</span>
</td>
<td>
<!--actions-->
</td>
</tr>
<tr class="data" id="abc12356">
<td>
<span class="label tip-top files-count" data-original-title="Files in">1</span>
</td>
<td colspan="1">
<a class="tname" href="/file/123/1">Hi user</a>
</td>
<td class="tprogress">
<span class="label size tip-top" data-original-title="Size">18.2MB</span>
</td>
<td>
<!--actions-->
</td>
</tr>
</table>';
$dom=new DOMDocument;
$dom->loadHTML( $strhtml );
$xpath=new DOMXPath( $dom );
$col=$dom->getElementsByTagName('tr');
if( $col ){
$output=array();
foreach( $col as $tr ){
$a_usr=$xpath->query( 'td/a[#class="tname"]', $tr );
$output[]=array('id'=>$tr->getAttribute('id'), 'user'=>$a_usr->item(0)->nodeValue );
}
/* Display what was found */
echo '<pre>',print_r($output,true),'</pre>';
}
/* not really required but tidy up */
$dom = $xpath = $col = $tr = $output = null;
?>

Get the value of text of header(HTML,CSS)

Now I have to click on subscribe button and get the value of the plan name that is either Platinum or Gold.
HTML:
<div role="tabpanel" class="tab-pane active col-md-9" id="home">
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan" style="background: #E8FFD2;">
<tr>
<th style="background: #60D760;">
<h3 class="Plan">Platinum</h3>
<p>AGENCIES & MARKETING TEAMS</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$299</p>
<span>per month</span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="btn btn-success pricing-button">Subscribe</span>
</td>
</tr>
</table>
</div>
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan">
<tr>
<th style="background: #22D3FF;">
<h3 class="Plan">Gold</h3>
<p>CONSULTANTS & SMALL BUSINESSES</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$199</p>
<span>per month</span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="btn btn-info pricing-button">Subscribe</span>
</td>
</tr>
</table>
</div>
</div>
jQuery:
$(function() {
$(".pricing-button").click(function() {
alert($(this).find('.Pricing-Plan Plan').text());
//$('.Plan').val(function () {
// $(this).text();
//});
});
});
I need to get price and plan name on Subscribe button click, I hope someone help me out with this.

You can get it by slightly modifying your code to:
$(".pricing-button").click(function() {
alert($(this).parents('table').find('.Plan').html());
});
DEMO
OR
You can add custom attribute data-plan="Plantinum/Gold" to your pricing button as:
<span class="btn btn-info pricing-button" data-plan="Gold">Subscribe</span>
And get attribute value as following:
$(".pricing-button").click(function () {
alert($(this).attr('data-plan'));
});
DEMO

This will work.
$(function () {
$(".pricing-button").click(function () {
alert($(this).closest('.Pricing-Plan').find('.Plan').text());
});
});

Try to this way .
Used to this
$(this).parents('table').find('.Plan').html();
Demo
$(function () {
$(".pricing-button").click(function () {
var htmlString =$(this).parents('table').find('.Plan').html();
alert( htmlString );
//$('.Plan').val(function () {
// $(this).text();
//});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane active col-md-9" id="home">
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan" style="background: #E8FFD2;">
<tr>
<th style="background: #60D760;">
<h3 class="Plan">Platinum</h3>
<p>
AGENCIES & MARKETING
<br />
TEAMS
</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$299</p>
<span>per month</span>
</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="btn btn-success pricing-button">Subscribe</span></td>
</tr>
</table>
</div>
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan">
<tr>
<th style="background: #22D3FF;">
<h3 class="Plan">Gold</h3>
<p>CONSULTANTS & SMALL BUSINESSES</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$199</p>
<span>per month</span>
</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="btn btn-info pricing-button">Subscribe</span></td>
</tr>
</table>
</div>
</div>

You can do like following way to get price and package name.
HTML:
<span class="btn btn-success pricing-button" onClick="$(this).MessageBox('platinum','$299');">Subscribe</span>
<span class="btn btn-info pricing-button" onClick="$(this).MessageBox('gold','$199');">Subscribe</span>
JQuery:
$.fn.MessageBox = function(package,price) {
alert(package + " has price " + price);
};
Working Fiddle

This will work
$(".pricing-button").click(function () {
alert($(this).closest('.col-sm-4').find('.Plan').text());
});

HTML/jQuery finding text in closest <p> tag

I've got a table with different td's with the same ID, this is my table, in a foreach loop:
<td class="AMLLeft" style="display:inline-block; !important">ID:
<p class="important">${item.id}</p>
</td>
<td align="right" nowrap="true" class="AMLRight">Transaction sum: ${item.sum} ${item.currencyCode}</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>AML ID: ${item.id}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}">
<input type="button" value="Comment" class="btn btn-xs btn-primary commentButton" <a href="#myModal" data-toggle="modal" id="${item.id}" data-target="#edit-modal">
</div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>AML Category: ${item.amlClientCategory}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}">
<input type="button" value="Close" class="btn btn-xs btn-primary">
</div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>Client ID: ${item.clientId}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}">
<input type="button" value="Set Investigate" class="btn btn-xs btn-primary">
</div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>Status: ${item.status}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>Comment: ${item.comment}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
I want to be able to find the value of the 2nd rows: <p class="important">${item.id}</p>, This is the code I've tried so far, which didn't work:
$(".commentButton").on('click', function () {
var id = $(this).find('p.important').value();
alert("id is:" + id);
});
Any help with this is very much appreciated!

$(this).closest('tr').siblings().find('p.important').text();
try this
Using the button select the tr use siblings() to get the tr of the p with .important. after getting the tr use .find() to search for the p.important and finally using .text() get the value.

$(".commentButton").on('click', function () {
var id = $(document).find('p.important').html();
alert("id is:" + id);
});
this is your button, which does not contain the item your searching.
.html gets the value between the html tags

Categories

Resources