My table is built with the same ID's on every row, with a foreach loop. To find the text inside the <p class="comment" - I have to specify where ( I want to find the closest one )
My table looks like this:
<c:forEach items="${items}" var="item">
<div class="container theme-showcase" role="main">
<div class="row">
<div class="col-md-6">
<table class="table fixed">
<tbody id="extend">
<tr data-toggle="collapse123" class="clickableRow" nowrap="true" data-target=".demo${item.id}" id="${item.id}">
<td class="AMLLeft" nowrap="true">
<label for="important"style="display: inline !important">ID:</label>
<p class="important"style="display: inline !important">${item.id}</p>
</td>
<td align="right" class="AMLRight">
<pre class="thepre">Transaction sum: ${item.sum} ${item.currencyCode}</pre>
</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" nowrap="false">
<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 closeButton"></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 investigateButton"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p class="status">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 class="comment">Comment: ${item.comment}</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>Transaction sum: ${item.sum} ${item.currencyCode}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</c:forEach>
I want to find the text of <p class="comment">${item.comment}</p> but this time it's inside a <div>. I'm not sure how to do this but this is the code I've tried so far:
var commentValue = $(this).closest('tr.hiddenRow').siblings().find('p.comment').text();
Any help is very appreciated!
I know I've posted a similar question here but this is different because it's inside a <div>, and I can't help myself.
To save people trawling through the comments, the eventual solution is here:
https://jsfiddle.net/5nL1e31z/3
I believe this achieves what you wanted, and I've tried to break it out so it's clear what's happening: https://jsfiddle.net/5nL1e31z/ If it isn't quite right, just let me know and I can update it.
$('.test-button').click(function () {
var parentRow = $(this).parent().parent();
$(parentRow).css('background-color', 'red');
var hiddenRow = $(parentRow).siblings('.hiddenRow');
$(hiddenRow).css('background-color', 'yellow');
var commentTextP = $(hiddenRow).find('.comment');
console.log(commentTextP.text());
});
var commentvalue = $(this).parent().find('p').text();
http://jsfiddle.net/ux0a3zsx/
Because the button is what this refers to and p is not inside it
did you tried this?
var text= $(this).closest('.hiddenRow').find('.comment');
Related
I am making a checklist, I have the categories and each category has its intervention, you have to check according to what corresponds to the problem that is that for example.
CheckList.vue
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" style="vertical-align: top">Categoria</th>
<th colspan="2">Existe</th>
<th colspan="3">Estado</th>
<th colspan="2" rowspan="2" style="vertical-align: top">
Observación
</th>
</tr>
<tr>
<th>Si</th>
<th>No</th>
<th>Bueno</th>
<th>Regular</th>
<th>Malo</th>
</tr>
</thead>
<tbody
v-for="(formatchecklist, index) in formatchecklists"
:key="index"
>
<tr>
<td colspan="8" class="table-secondary">
<em>{{ index + 1 }}.- {{ formatchecklist.categoria }}</em>
</td>
</tr>
<tr
v-for="intervencion in formatchecklist.intervenciones"
:key="intervencion.id"
>
<td>{{ intervencion.intervencion }}</td>
<td class="text-center">
<input
type="radio"
name="existe"
value="si"
v-model="checkExiste"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="existe"
value="no"
v-model="checkExiste"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="bueno"
v-model="checkEstado"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="regular"
v-model="checkEstado"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="malo"
v-model="checkEstado"
/>
<label></label>
</td>
<td>
<textarea
name="observacion"
class="form-control"
></textarea>
</td>
<td>
<a
class="btn btn-warning btn-sm"
#click.prevent=""
title="Editar"
>
<i class="fas fa-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
When selecting the first radio there is no problem, the problem is when selecting the second radio of the second row, intervention 2, the first one is deselected.
https://codepen.io/lucascardemil/pen/GRMejWK
and how can i get that data
The radios' names are the same so each rows' radio whose name is existe will action like radio group,so only one is selected.
In other words, you need to assign different names for each rows' radio button group.And the model-binding you also need to be changed to save it correctly corresponding to each intervencion if necessary.
Below is my sample code in vuejs 2 which you could refer to.
<template>
<div>
<table class="table table-bordered" style="width: 100%;">
<thead>
<tr>
<th rowspan="2" style="vertical-align: top">Categoria</th>
<th colspan="2">Existe</th>
<th colspan="3">Estado</th>
<th colspan="2" rowspan="2" style="vertical-align: top">
Observación
</th>
</tr>
<tr>
<th>Si</th>
<th>No</th>
<th>Bueno</th>
<th>Regular</th>
<th>Malo</th>
</tr>
</thead>
<tbody
v-for="(formatchecklist, index) in formatchecklists"
:key="index"
>
<tr>
<td colspan="8" class="table-secondary">
<em>{{ index + 1 }}.- {{ formatchecklist.categoria }}</em>
</td>
</tr>
<tr
v-for="intervencion in formatchecklist.intervenciones"
:key="intervencion.id"
>
<td>{{ intervencion.intervencion }}</td>
<td class="text-center">
<input
type="radio"
:name="'existe' + intervencion.id"
value="si"
v-model="intervencion.existeValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'existe' + intervencion.id"
value="no"
v-model="intervencion.existeValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="bueno"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="regular"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="malo"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td>
<textarea
:name="'observacion' + intervencion.id"
v-model="intervencion.observacion"
class="form-control"
></textarea>
</td>
<td>
<a
class="btn btn-warning btn-sm"
#click.prevent=""
title="Editar"
>
<i class="fas fa-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
<pre>
{{JSON.stringify(formatchecklists, null, 2)}}
</pre>
</div>
</template>
<script>
export default {
data() {
return {
formatchecklists :[{
"categoria":"category1",
"intervenciones":[{
"id":1,
"intervencion":"intervencion1",
"existeValue":"",
"estadoValue":"",
"observacion":""
},
{
"id":2,
"intervencion":"intervencion2",
"existeValue":"",
"estadoValue":"",
"observacion":""
}]
},
{
"categoria":"category2",
"intervenciones":[{
"id":3,
"intervencion":"intervencion3",
"existeValue":"",
"estadoValue":"",
"observacion":""
},
{
"id":4,
"intervencion":"intervencion4",
"existeValue":"",
"estadoValue":"",
"observacion":""
}]
}]
};
}
};
</script>
I want to sort all values but jquery sorts only three values
I want multiple table sort on tag h2 but when i sort it only sort first 3 values but i want all values
$('#alphBnt').on('click', function() {
var sorting = $(".box").sort(function(a, b) {
return $(a).find("h2").text() > $(b).find("h2").text();
});
$("#container").html(sorting)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
<table border=2px class="box">
<tr>
<td class="name">
<h1>mui</h1>
</td>
<td class="number">
<h2>4512</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>oinecellars</h1>
</td>
<td class="number">
<h2>566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>34566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>1</h2>
</td>
</tr>
</table>
</div>
You need to use - :
$('#alphBnt').on('click', function() {
var sorting = $(".box").sort((a, b) => $(a).find("h2").text() - $(b).find("h2").text()).appendTo("#container")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
<table border=2px class="box">
<tr>
<td class="name">
<h1>mui</h1>
</td>
<td class="number">
<h2>4512</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>oinecellars</h1>
</td>
<td class="number">
<h2>566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>34566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>1</h2>
</td>
</tr>
</table>
</div>
<tr role="row" class="odd">
<td style="background-color:white">
<table>
<tbody>
<tr data-row-id="22">
<td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22"><label class="pid 8843">8843</label></td>
<td style="width: 120px">QCH/H3E/TCZN0D </td>
<td style="width: 270px">Territory Health Intermediate Hospital 500 With Essential Extras </td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-success 8843 pull-right" id="approve-row" data-id="22" href="javascript: void(0)" style="display:none">
<i class="glyphicon glyphicon-plus">Approve</i>
</button>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding:0">
<table>
----
</table>
</td>
</tr>
I am using jQuery datatable and in each row I have tables with inner tables.
I am able to get the required table from the datatable list using:
$(this).closest('table').closest('table tr')[0]
But I am not able to get the pid value which is inside
<label class="pid 8843">
I want to find the pid value. Each row has different pid values. For example:
<label class="pid 2">
<label class="pid 3">
<label class="pid 4">
...
I have found the correct tr in which my pid value resides but how to get the pid value is a problem.
Any help would be appreciated.
if the structure is same in you table, just target label and class to get that attr,, like this:
:EDIT (target input, even better)
$( $(this).closest('table').closest('table tr')[0] ).find('input').val()
try again please
Try this:
$('button').closest('table').find('tr:first td:first').find('label').attr('class')
console.log($('button').closest('table').find('tr:first td:first').find('label').attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22"><label class="pid 8843">8843</label></td>
<td style="width: 120px">QCH/H3E/TCZN0D </td>
<td style="width: 270px">Territory Health Intermediate Hospital 500 With Essential Extras </td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-success 8843 pull-right" id="approve-row" data-id="22" href="javascript: void(0)">
<i class="glyphicon glyphicon-plus">Approve</i>
</button>
</td>
</tr>
</tbody>
</table>
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
I have an html table inside a div, and i want to run jquery on each li element or the li class
and alert his id.
this is the html code.
this is the html code.
HTML:
<div id="lightbox_tlbr" style="top: 273px; display: block;">
<div id="test">
<div class="header_div" id="first_header"></div>
<div class="header_div" id="second_header"></div>
<div class="header_div" id="third_header"></div>
<div class="header_div" id="fourth_header"></div>
</div>
<li class="announcement_tlbr" id="announcement7">
<table id="tg_toolbar7" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text07">
<th style="background-image:url(/srv/admin/img/announcement/general_message_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text17"></th>
<th colspan="2" style="background-color:green" class="title_style_toolbar" id="tg_text27"><a style="color:white;font-size:11px;">2014-03-27 10:36:25</a><br><a style="color:white;">Title - 6 test</a><a></a></th>
<td style="width:0px;background-color:green;" id="tg_text87"><input type="button" class="minimze" style="background-color:green;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze7"></td>
</tr>
<tr id="tg_text97">
<td colspan="2" class="tg_text" id="tg_text37"></td>
</tr>
<tr class="r2_toolbar" id="tg_text47">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text57"></td>
<td class="tg_toolbar-031e" id="tg_text67"></td>
<td class="tg_toolbar-031e" id="tg_text77"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button7"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox7"></td>
</tr>
</tbody>
</table>
</li>
<li class="announcement_tlbr" id="announcement5">
<table id="tg_toolbar5" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text05">
<th style="background-image:url(/srv/admin/img/announcement/bug_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text15"></th>
<th colspan="2" style="background-color:red" class="title_style_toolbar" id="tg_text25"><a style="color:white;font-size:11px;">0000-00-00 00:00:00</a><br><a style="color:white;">Title - 4 test</a><a></a></th>
<td style="width:0px;background-color:red;" id="tg_text85"><input type="button" class="minimze" style="background-color:red;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze5"></td>
</tr>
<tr id="tg_text95">
<td colspan="2" class="tg_text" id="tg_text35"></td>
</tr>
<tr class="r2_toolbar" id="tg_text45">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text55"></td>
<td class="tg_toolbar-031e" id="tg_text65"></td>
<td class="tg_toolbar-031e" id="tg_text75"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button5"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox5"></td>
</tr>
</tbody>
</table>
</li>
<div align="left" class="footer">Please confirm you have read and acted upon this message</div>
</div>
i try:
jQuery.each(".announcement_tlbr", function(k,v){ alert(k); })
what is a good way to do this?
You should use this inside each to get the reference of current element.Try this:
jQuery.each(".announcement_tlbr", function(e){
alert($(this).attr('id'));//or this.id
});
$(document).ready(function() {
$(".announcement_tlbr").each(function(){
alert($(this).attr("id"))
});
});