I want to find parent sibling td hidden value when clicking correctAttempt class in div.
<tr th:each="m : ${markWiseResultModel}">
<td th:text="${m.id}" align="center"></td>
<td class="topicTD">
<input type="hidden" class="topicId" th:value="${m.topic.id}"/>
<div th:text="${m.topic.name}" align="center"></div>
</td>
<td data-toggle="modal" style="background:#b8d1f3;">
<div class="correctAttempt" th:text="${m.correctAttemptCount}" align="center" ></div>
</td>
<td th:text="${m.correctAttemptPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.wrongAttemptCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.wrongAttemptPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.correctTotalCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.correctTotalPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.wrongTotalCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.wrongTotalPercent}" align="center" style="background:#99FF99;"></td>
</tr>
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id = $(this).parents('td').siblings('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>
Already tried script with no success.
Try this-
Demo
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id= $(this).parent().prev('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
Try this one.
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id= $(this).parent().prev('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>
You can use closest to get the parent tr element, then you need to find the .topicId. Try this:
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id = $(this).closest('tr').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>
The advantage of using closest instead of traversing rigidly by parent is that you can change your tr and td structure without having to amend the JS code, so long as the classnames remain the same.
Example fiddle
Related
I need to obtain the value of the checkbox when "expand" is clicked, I have tried the following this looks clumsy and when the DOM is modified then it may render undefined instead of the expect value CBVALUE
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
$('.option').click(function(e) {
e.preventDefault();
alert($(this).parent().prev().prev().children().first().val()); //should alert as CBVALUE
});
Is there an easier solution than traversing with relative elements?
You can try below logic where find parent tr and then find checkbox to read value
$(function(){
$('.option').on('click', function(e) {
e.preventDefault();
var value = $(this).closest('tr').find('input:checkbox').val();
alert(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
</table>
Try $.parents() instead:
$(this).parents('tr').find('input[type=checkbox]').val()
You can use jQuery's $(...).siblings() method and pass it a selector:
$('.option').click(function(e) {
e.preventDefault();
alert($(this).siblings("#r0[type='checkbox']").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
for me, .find() method seems to return an array of checkbox objects, I need to add [0] to the end to be able to apply .val() method, otherwise I got 'on' all times. Example:
var value = $(this).closest('tr').find('input:checkbox')[0].val()
Yo can do by using filtering. See this demo link
$(this).closest('td').parent().find('input[type=checkbox]').val()
I have got a problem. I need to add lines in the table and give the numbered classes, like name_4, name_5 and so on using javascript or jquery.
<body>
<form action="" method="post">
<button>Добавить</button>
<input type="submit" value="Подтвердить">
<table>
<tr>
<td class='name_1'>ФИО</td>
<td class='subj1_1'>1-ый предмет</td>
<td class='subj2_1'>2-ой предмет</td>
<td class='subj3_1'>3-ий предмет</td>
</tr>
<tr>
<td class='name_2'>text</td>
<td class='subj1_2'>text</td>
<td class='subj2_2'>text</td>
<td class='subj3_2'>text</td>
</tr>
</table>
</form>
<script>
$(document).ready(function() {
$("button").click(function(){
var line = "<tr><td class='name'>Text</td><td class='subj1'></td><td class='subj2'></td><td class='subj3'></td></tr>"
$("table").append(line)
$("tr:last").hide()
$("tr:last").fadeToggle(1000)
});
});
</script>
Get the length of tr using $("#tableId tr).length and add 1 to it
$(document).ready(function() {
$("button").click(function(e) {
e.preventDefault();
let getTRLength = $("#myTable tr").length + 1;
var line = "<tr><td class='name_" + getTRLength + "'>Text</td><td class='subj1'></td><td class='subj2'></td><td class='subj3'></td></tr>"
$("table").append(line)
$("tr:last").hide()
$("tr:last").fadeToggle(1000)
});
});
.name_3 {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<button>Добавить</button>
<input type="submit" value="Подтвердить">
<table id="myTable">
<tr>
<td class='name_1'>ФИО</td>
<td class='subj1_1'>1-ый предмет</td>
<td class='subj2_1'>2-ой предмет</td>
<td class='subj3_1'>3-ий предмет</td>
</tr>
<tr>
<td class='name_2'>text</td>
<td class='subj1_2'>text</td>
<td class='subj2_2'>text</td>
<td class='subj3_2'>text</td>
</tr>
</table>
</form>
Your code doesn't work because you didn't specify the button type attribute. Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.
If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.
If your buttons are not to submit form data to a server, be sure to set their type attribute to button. Otherwise they will try to submit form data and to load the nonexistent response, possibly destroying the current state of the document.
$( document ).ready( function() {
$( 'button' ).click( function() {
var line = "<tr><td class='name'>Text</td><td class='subj1'></td><td class='subj2'></td><td class='subj3'></td></tr>";
$( 'table' ).append( line );
$( 'tr:last' ).hide().fadeToggle( 1000 )
} );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<button type="button">Добавить</button>
<input type="submit" value="Подтвердить">
<table>
<tr>
<td class='name_1'>ФИО</td>
<td class='subj1_1'>1-ый предмет</td>
<td class='subj2_1'>2-ой предмет</td>
<td class='subj3_1'>3-ий предмет</td>
</tr>
<tr>
<td class='name_2'>text</td>
<td class='subj1_2'>text</td>
<td class='subj2_2'>text</td>
<td class='subj3_2'>text</td>
</tr>
</table>
</form>
I want to get the id of td element on it's click.
Javascript code is -
$('#example').on('click', '.alertShow', function () {
var id=$(this).closest('td').attr("Id");
alert(id);
}
And this is HTML
<table border="1" id="example">
<tr>
<td class="alertShow" id="2_0">
</td><td class="alertShow" id="2_1">
</td><td class="alertShow" id="2_2"></td>
<td class="alertShow" id="2_3"></td>
<tr>
<tr>
<td class="alertShow" id="3_0">
</td><td class="alertShow" id="3_1">
</td><td class="alertShow" id="3_2"></td>
<td class="alertShow" id="3_3"></td>
<tr>
</table>
try this:
$('#example').on('click', '.alertShow', function () {
var id=$(this).attr("id");
alert(id);
}
first of all, you have a typo in your code - replace attr("Id") with attr("id")
secondly, $(this) already refers to td, so there is no need in using closest - $(this).attr("id") is enough
$(document).on("click", "#board td", function(e) { var data = $(this).attr('id'); alert (data); });
Have you tried
$('#example td.alertShow').click(function () {
alert($(this).attr("id"));
});
You are doing it correct. Just change attr("Id") to attr("id")
Check this link-
https://jsfiddle.net/codecore/Lbq1x590/12/
Below is the Working Code for what you are trying to achieve-
https://jsfiddle.net/d5mk4q77/2/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<table border="1" id="example">
<tr>
<td class="alertShow" id="2_0">11</td>
<td class="alertShow" id="2_1">22</td>
<td class="alertShow" id="2_2">33</td>
<td class="alertShow" id="2_3">44</td>
<tr>
<tr>
<td class="alertShow" id="3_0">55</td>
<td class="alertShow" id="3_1">66</td>
<td class="alertShow" id="3_2">77</td>
<td class="alertShow" id="3_3">88</td>
<tr>
</table>
</body>
$('#example').on('click', '.alertShow', function () {
var id=$(this).closest('td').attr("Id");
alert(id);
});
If you use JQuery you can do:
$("td").click(function(){
alert(this.id)
})
If you don't use JQuery just add
<script src="jquery-1.12.4.min.js"></script>
To your <head></head> tags
You could also do (to only use the example table)
$("#example tr td").click(function(){
alert(this.id)
})
I am working on a SharePoint web site , and I need using CSS (Preferred) or JavaScript, to hide a table row that have two main TDs:-
TD with a text named Item Number.
TD with an input titled Item number.
Here is how the mark-up is constructed:-
Can anyone advice on this please?
i tried the following script , but did not hide the Item Number or the customer initial , baring in mind that all the TR are inside a table which have .ms-formtable class:-
<script>
$(function() {
$('.ms-formtable tr').each(function() {
var frstVal = $(this).find('td').eq(0).text();
if (frstVal.match(/Item Number|customer Initials/i)) {
$(frstVal).remove()
}
});
});
</script>
here is the related markup :-
<table width="100%" class="ms-formtable" style="margin-top: 8px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="113" class="ms-formlabel" nowrap="true" valign="top">
<h3 class="ms-standardheader">
<nobr>Item Number</nobr>
</h3></td>
<td width="350" class="ms-formbody" valign="top">
<span dir="none"><input title="Item Number" class="ms-long ms-spellcheck-true" id="_x0049_D1_806a702b-1716-47f5-a93c-16067f502daf_$TextField" type="text" maxlength="255" value=""><br></span>
<span class="ms-metadata">Do not customize at the list level</span>
</td></tr>
EDIT
now i tried this script :-
<script>
$(function () {
$('.ms-formtable table').each(function () {
$(this).find('tr').each(function () {
$(this).find('td').text() = 'Item Number';
$(this).remove();
}
});
});
</script>
but did not hide the Item Number field...
Hope this is what you are looking for .
$('tr').each(function(){
var count=0;
$(this).find('td').each(function(){
if($(this).text()=='Item Number'){count=count+1;}
if($(this).find('input[title="Item Number"]')){count=count+1;}
});
if(count==2){$(this).hide();}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
</head>
<body>
<table width="100%" class="ms-formtable" style="margin-top: 8px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="113" class="ms-formlabel" nowrap="true" valign="top">
<h3 class="ms-standardheader">
<nobr>Item Number</nobr>
</h3></td>
<td width="350" class="ms-formbody" valign="top">
<span dir="none"><input title="Item Number" class="ms-long ms-spellcheck-true" id="_x0049_D1_806a702b-1716-47f5-a93c-16067f502daf_$TextField" type="text" maxlength="255" value=""><br></span>
<span class="ms-metadata">Do not customize at the list level</span>
</td>
</tr>
</table>
</body>
</html>
Code snippet output will be an empty page,as in example table is having only one row which has 2 td's as mentioned,so am hiding the row,based on the creteria.
Your script and HTML has a few issues.
In your html there is no text inside any of the td's and you have the following query :
var frstVal = $(this).find('td').eq(0).text(); // how is this query going to retrive anything at all ?
The issue with your script is you're iterating over all the tr's but you're caching only the text() of the first td inside every tr, so change the script to the following :
$(function() {
$('.ms-formtable tr').each(function() {
$(this).find('td').each(function(){
var str_text = $(this).text();
if (str_text.match(/Item Number|customer Initials/i)) {
$(this).text(' ');
}
});
});
});
Fiddle here
Edit
You're selecting the wrong element, the below query is wrong :
var str_text = $(this).text();
$(this) is pointing to tr , you need to go inside tr and find nobr and then perform your action.
$('.ms-formtable table').each(function () {
$(this).find('tr').each(function () {
var str_text = $(this).find('td nobr').text();
// console.log(str_text);
if (str_text.match(/Item Number/i)) {
$(this).find('input').remove(); // add this to remove input
$(this).text(' ');
}
}
});
});
Any ideas why this doesn't work?
http://jsfiddle.net/zk4pc/2/
I'm trying to get it so that everytime there is an element with the class "insert_name", the name is printed from the table.
Could you also help me make the selection more advanced (for instance only using the data from the first tr in the "client-profile" class?
Thanks!
HTML
<body onload="printMsg()">
<div id="api_data" style="display:none;">
<div class="client-profile">
<div class="head icon-5">Customer Details</div>
<table id="client-information">
<tbody>
<tr>
<td class="left">Name:</td>
<td class="color">Matthew Tester
</td>
</tr>
<tr class="dark">
<td class="left">E-mail:</td>
<td class="color">asdfg</td>
</tr>
<tr>
<td class="left">Registration:</td>
<td class="color">2013-11-21</td>
</tr>
<tr class="dark">
<td class="left">Status:</td>
<td class="color"><span class="active">Active</span>
</td>
</tr>
<tr>
<td class="left">Last Login Time:</td>
<td class="color" title="2014-05-28 11:43:46">1 hour ago</td>
</tr>
<tr class="dark">
<td class="left">Last Login From:</td>
<td class="color">123.123.123.123</td>
</tr>
<tr>
<td class="left">Location:</td>
<td class="color">United Kingdom</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="insert_name"></div>
</body>
Javascript
(function printMsg() {
var node = document.getElementsByClassName('insert_name');
node.innerHTML = $('[class*="color"]').eq(0).text();
})();
jsFiddle Demo
The issue is with your node selection. When you select by class name it returns an array of elements. Since you are only looking for the div with that class name, access the first index to reference it.
var node = document.getElementsByClassName('insert_name')[0];
edit
To make this iterate all of the nodes you could take this approach
var nodes = document.getElementsByClassName('insert_name');
var text = $('[class*="color"]').eq(0).text();
for(var i = 0; i < nodes.length; i++){
nodes[i].innerHTML = text;
}
Alternatively, since jQuery is already included, you could remove the body's onload event and just use this
jsFiddle Demo
$(function(){
$('.insert_name').html($('[class*="color"]').eq(0).text());
});
To ensure this only acts on the client-profile class the selector would be
$('.insert_name').html($('.client-profile [class*="color"]').eq(0).text());
If you are just trying to insert the name rather than all of the content, this should do the trick:
$(function() {
$('.insert_name').text($('td:contains("Name:")').next().text());
});
Here is the fiddle:
http://jsfiddle.net/b8LKQ/
Hope that helps!
I added a little more jQuery:
$(function() {
$('[class*="color"]').each(function(){
$('.insert_name').append($(this).text());
});
});
http://jsfiddle.net/zk4pc/7/
Hope that helps!