Failed to get a table cell - javascript

I have the following problem when wanting to get the cell of a table where a change event is not achieving its procurement.
Any idea how to get it , it would be well received .
<tr>
<td>1</td>
<td><div class="switch switch-small">
<input name="op1" type="checkbox" checked />
</td></div>
</td></tr>
$("tbody tr td input:checkbox").change(function() {
id = $(this).parent().parent().children().index(this.parentNode);
alert(id);
});

jsBin demo
You cannot close a </div> after a </td>. Also you're closing 3 times a TD element. Please review your HTML markup immediately.
If you want to get the TD where you clicked the checkbox:
$("td :checkbox").change(function() {
var TD = $(this).closest("td");
alert(TD.index()); // or use TD.closest("tr").index(); // to get the TR index
});

Your question is not clear, but I suppose you want to get the index corresponding to a radio input. As #Roko mentioned in his answer, your markup is wrong, it should be in the following form:
<tr>
<td>1</td>
<td>
<div class="switch switch-small">
<input name="op1" type="checkbox" checked />
</div>
</td>
</tr>
Finally to get index, 1, when input with name op1 changes, here's how you do that:
$("td input[type='checkbox']").on("change", function() {
var trParent = $(this).parent().parent().parent();
var id = $("tr").index(trParent);
alert(id);
});
I hope that helps, or you may consider reviewing your question.

Try a simpler
$(function() {
$("table [type='checkbox']").on("change", function() {
console.log($(this).parent().prev().html());
});
});
jQuery selector meaning : "anything in the table having type=checkbox"

var cell = $(this).closest('td');
var cellIndex = cell[0].cellIndex
var row = cell.closest('tr');
var rowIndex = row[0].rowIndex;

Related

How to select first td compared to the clicked td

It should be very easy if the selector was just <tr> like this $('tr'), but I target td. For example click here or td 2 etc. I want to have the content of the first td compared to the clicked td. That is to say td 1 in this case.
//And this is my jQuery code with <tr> .. what about if a select was a <td> ?
$('tr').on('click', function() {
var tds = $('td:first-child', this).text();
alert(tds);
});
//After having documented I found this but that did not help :(
var td1 = $(this).closest('td.id').prev('').text();
alert(td1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="id"> td 1 </td>
<td> td 2 </td>
<td> td 3 </td>
<td> CLICK HERE </td>
</tr>
</table>
Thank you in advance
To get the first td of any clicked row use the :first selector, like this:
$('tr').on('click', function() {
var tds = $(this).find('td:first').text();
});
Alternatively, if the click event is bound to the td itself, use closest() to get the parent tr, then find the first td:
$('td').on('click', function() {
var tds = $(this).closest('tr').find('td:first').text();
});
You can use jQuerys parent() and children() functions:
$('td').on('click',function()
{
var tr = $(this).parent();
var tds = tr.children();
var first_td = tds[0];
var text = $(first_td).text();
alert(text);
});

How to change color of my div if check-box is checked?

I have table that is created based on records from data base. Inside of tbody I have tr that creates each table row. Table row has multiple time slots for same date. I want to change background color of my time block if check box is checked. I got my check box to work, I did test with alert and some text inside. Now I'm trying to change the background color but nothing works in this case that I tried so far. Here is my code:
<cfoutput query="qryTest" group="DateMeeting">
<tbody>
<tr>
<td>#DateMeeting#</td>
</tr>
<cfoutput>
<tr class="blockRow">
<td>#StartTime#</td>
<td>#EndTime#</td>
<td><input type="checkbox" name="block" id="block"></td>
</tr>
</cfoutput>
</tbody>
</cfoutput>
Java script:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
$(this).is(":checked") ? div.addClass("red") : div.removeClass("red");
});
and my css:
.red{
background-color:red;
}
This is working code that I updated. Problem number one was in html structure of my code. Second If I used document.getElementById('') I was getting only first row chnaged background-color, no matter which row I click on. So I have had to use getElementByClassName. Anyway I decided to use JQuery addClass/removeClass. Thanks everyone for help with this problem.
Try this:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
$(this).is(":checked") ? div.addClass("red") : div.removeClass("red");
});
.red{
background-color:red;
}
<cfoutput query="qryTest" group="DateMeeting">
<tbody>
<tr>
<td>#DateMeeting#</td>
<cfoutput>
<div class="blockRow">
<td>#StartTime#</td>
<td>#EndTime#</td>
<td><input type="checkbox" name="block" id="block"></td>
</div>
</cfoutput>
</tr>
</tbody>
</cfoutput>
jsfiddle:
https://jsfiddle.net/3s83gj70/2/
This gets the closest blockrow to the current checkbox so should work with more than one instance. Since you can't have 2 elements with the same id I have change blockrow to the class.
If you want to do other things based on the same condition then you can do this:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
if($(this).is(":checked")){
div.addClass("red");
//checkbox is checked, do something
}
else
{
div.removeClass("red");
//checkbox is not checked, do something else
}
});
Easy:
$('#blockRow').css("background-color","red")
------------------------------^
EDIT
Then you don't include jQuery library. To make pure js make this:
http://jsfiddle.net/bfss81sa/
document.getElementById("box").style.backgroundColor = "red";
Here you are the complete snippet:
var cbs = document.querySelectorAll('input[type=checkbox]');
for(var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if(this.checked) {
document.getElementById("box").style.backgroundColor = "red";
} else {
document.getElementById("box").style.backgroundColor = "transparent";
}
});
}
<input type="checkbox" name="block" id="block">
<div id="box">
The box
</div>
Your html code is a mess. Anyway, generally :
$('input[type=checkbox]').click(function() {
if($(this).is(':checked') {
$(this).parents('tr').find('td:first').css('background', 'red');
} else {
$(this).parents('tr').find('td:first').css('background', 'white');
}
});
Of course, you can narrow the scope of input:checkbox selector.
If it is not the FIRST <td> in your <tr> then you better assign it a class and get it with it.
NOTE : DOM must be correct <cfoutput> cannot be child of <tr>; <div> cannot have <td> as direct child; Incorrect DOM impact javascript traversing.

How to get td innerhtml values except input type="hidden" in jquery

i created a dynamic table. it can be dynamically add,edit and remove rows.
When adding every td inside the table it also add a hidden field that contain value. that is,
<tr>
<td>This is Text <input type="hidden" value="someValue"></td>
</tr>
here is the code to get the innerHtml inside the td element.
var par = $(this).parent().parent(); //tr
var tdName = par.children("td:nth-child(1)");
tdName.html("<input type='text' id='txtName' value='"+tdName.html()+"'/>");
But when i using this code it show the text with input hidden type. That is,
This is Text <input type="hidden" value="someValue">
Here i dont want to get the hidden input field. I only need other part that is This is Text . Is it possible?
i tried tdName.children("input[type!=hidden]").val()
But it doesnt works.
Just use .text() to get the text in that row:
tdname.children().text()
FIDDLE
You can try this,
var txt = tdname.contents().filter(function () {
return this.nodeType == 3; //Filter it by text node
}).text();
var txt = $('.test').contents().filter(function () {
return this.nodeType == 3; //Filter it by text node
}).text();
alert(txt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="test">This is Text
<input type="hidden" value="someValue" />
</td>
</tr>
</table>
Use :hidden selector, It will return only visible elements:
See this fiddle: http://jsfiddle.net/u66ez4gv/
You need that:
tdName.children("input:visible").val()

how to get checkbox and textbox value present in a particular row of a table using javascript or jquery

I am trying to get checkbox and textbox value present in a particular row of a table. Below code is working fine in IE7 and not in IE8,9
HTML
<table id="tblSrc">
<tr>
<td><input type="checkbox" name="firstrowchkbox"></td>
<td><input type="text" name="firstrowtxtbox"></td>
</tr>
<tr>
<td><input type="checkbox" name="secondrowchkbox"></td>
<td><input type="text" name="secondrowtxtbox"></td>
</tr>
</table>
SCRIPT
var tbl = document.getElementById("tblSrc");
var firstrowchkval = tbl.rows[0].cells[0].firstChild.value
var firstrowtxtval = tbl.rows[0].cells[1].firstChild.value
How can i get the values using js or jquery by supporting all browsers
Demo
You can use jQuery selectors,
:first : Retrieves first-child.
:eq(n) : Retrieves nth child.
$('#tblSrc tr:first input[type="text"]').val();
$('#tblSrc tr:first input[type="checkbox"]').val();
to know whether the checkbox is checked or not use ,
$('#tblSrc tr:first input[type="checkbox"]').prop('checked')
Or if you need to get text from specific <td>
$('#tblSrc tr:eq(0) td:eq(0)').text();
$('#tblSrc tr:eq(0) td:eq(1)').text();
You can use:
firstrowchkval = $('#tblSrc tr:eq(0) [type="checkbox"]').val();
firstrowtxtval = $('#tblSrc tr:eq(0) [type="text"]').val();
try this..
If you want specific row.. then can place eq(1) for 2nd row
chkval = $('#tblSrc tr:eq(0) [type="checkbox"]').val();
txtval = $('#tblSrc tr:eq(0) [type="text"]').val();
use .each to get all the input value
$("#tblSrc").find("td input").each(function(){
alert(this.value)
});
or get single value based on type selector
var catchElement = $("#tblSrc").eq(0);
catchElement.find("[type=text]").val();
catchElement.find("[type=checkbox]").val();

Select input tag in the same row from a table on clicking an anchor tag in the same row

Sample Html(This only contains one of many more row).
<table id="ctl00_ContentPlaceHolder1_categoryTable" class="categoryTable sortAsc editInputs" border="0">
<tbody>
<tr>
<td>8</td>
<td>
<input name="ctl00$ContentPlaceHolder1$ctl17" type="text" value="307349_335692806541952_16061425_n.jpg" readonly="readonly" />
</td>
<td><input name="ctl00$ContentPlaceHolder1$ctl18" type="text" value="key1 " readonly="readonly" /></td>
<td>3/28/2013</td>
<td>.jpg</td>
<td>28120</td>
<td>307349_335692806541952_16061425_n.jpg</td>
<td>
Edit DeleteUpdate Cancel
</td>
<tr>
</tbody>
My Javascript
$(document).ready(function () {
console.log("document ready")
$(".categoryTable tr td a").click (function (event) {
console.log($(this).text() + "click detected");
if ($(this).text() === "Edit ") {//compare with "Edit " not "Edit"
console.log("Edit");
console.log($(this).parent().parent().children('td input').text());
$(this).siblings(".deletetLinkClass").attr("style", "display:none");
$(this).siblings(".updateLinkClass").attr("style", "display:;");
$(this).siblings(".cancelLinkClass").attr("style", "display:;");
$(this).attr("style", "display:none")
}
else
console.log("no EDit");
});
});
What i am trying to do is select the input tags in the same row tr but different td on click of an anchor tag in the same row. I have tried a lot of combinations of the following jQuery statement with no success. Please Help.
$(this).parent().parent().children('td input').text() Here this represents the clicked anchor tag. To be more clear i don't want to select all the input tags in the table, just the ones in the same row.
using parents() and find().
and to get the value of input, use val() and not text() ..
$(this).parent().parent().children('td input').text();
//--^^^^^^---here
try this
var inputs=$(this).parents('tr').find('input');
$.each(inputs,function(){ //<---- loop since you have multiple input
console.log($(this).val()); //.val() since val() is used to get the input value..
})
or using closest()and find().
var inputs=$(this).closest('tr').find('input');
using context
var inputs = $('td input', $(this).closest('tr')).val();
working fiddle here
You can do it this way:
$('td input', $(this).closest('tr')).val();
Try below code to find input from given row
$(this).closest('tr').find('td input').text()

Categories