We Keep Coding

How do I display the content of closest <td> on javascript?

I have looked everywhere, but my code does not work at all. I simply want to display the content of the td I'm clicking on.
I have this table:
<tr class='rowData' tooltip='{caracteristicas}'>
<td nowrap class='Body'><a href='{caracteristicas}' target="_blank" style="color:black" onClick='return confirm("VOCÊ SERÁ REDIRECIONADO PARA:\r\r {caracteristicas}")'>{inputDescItem}</a></td>
<td nowrap class='Body' align='right'>{quantidade} {hiddenCodigoItem}</td>
<td nowrap class='Body' align='center'>{grupoEstoque}</td>
<td nowrap class='Body' align='center'>{inputCodigoItem}</td>
<td nowrap class='Body' align='center'>{btnAtualizaItem}</td>
<td nowrap class='Body' align='center'><button type="button" class="btnTest">Assign</button></td>
<td nowrap class='Body' align='center' class="testNameClass" name="output" style="display:none;">{caracteristicas}</td>
</tr>
I want it so that when I click on the CLICK ME tag, it will display (in a pop-up, alert, modal or anything) the content of the below tag (that I'm not displaying).
I have the following javascript:
$("btnTest").on("click", function() {
alert($(this).closest('tr').find('testNameClass').val());
});
I'm not very good at JS so please go easy on me.

Look like you missing
$(".btnTest") instead of $("btnTest")
and just try
$(".btnTest").on("click", function() {
alert($(this).parents('tr').find('.testNameClass').val());
});

To target specific elements using a class you need to use a dot in front of the class name. In your case .btnTest and .testNameClass.
$(".btnTest").on("click", function() {
alert($(this).closest('tr').find('.testNameClass').text());
});
As you are looking for the text inside the td element you should use .text() instead of .val()
In the below example column ent_3 is hidden and you will get its values using the script mentioned above.
$(".btnTest").on("click", function() {
alert($(this).closest('tr').find('.testNameClass').text());
});
.testNameClass {
display: none;
}
table {
border-collapse: collapse;
}
th, td { border: 1px solid #000; padding: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="dataTable">
<thead>
<tr>
<th>pk</th>
<th>ent_1</th>
<th>ent_2</th>
<th>ent_3</th>
</tr>
</thead>
<tbody>
<tr>
<td>PK Row 0</td>
<td>Ent_1</td>
<td><button type="button" class="btnTest">Assign</button></td>
<td class="testNameClass">Row 0 Ent_3</td>
</tr>
<tr>
<td>PK Row 1</td>
<td>Ent_1</td>
<td><button type="button" class="btnTest">Assign</button></td>
<td class="testNameClass">Row 1 Ent_3</td>
</tr>
<tr>
<td>PK Row 2</td>
<td>Ent_1</td>
<td><button type="button" class="btnTest">Assign</button></td>
<td class="testNameClass">Row 2 Ent_3</td>
</tr>
</tbody>
</table>

Your method will be handed a reference to the MouseEvent which represents details of the click. Since it is an Event, it has a currentTarget which represents an "element" in the so-called DOM ... an internal data-structure which represents the HTML. This data structure is in the form of a tree, where each node has one parent, two siblings, and some children. You can now write code to "walk up the tree" until you encounter a td node. The first one you come to is the innermost containing td.

I think you are targeting is incorrect use a . before the class name - also I see two classes in one element I set this up for you here have a look
https://jsfiddle.net/hw0ansyj/1/
$(".btnTest").on("click", function() {
alert($('.testNameClass').html());
});

jQuery selector for sibling of a label in a table

I'm writing a user-script for a third-party website and looking to select value inside a table which has a preceding TD with a label.
Question: I'm looking to get value1 as the result, but it's selecting the containing TD as well, so I get something else too.
Limitations
Can't modify the HTML to be more query-friendly (duh, it's not my site ;)
The table has no ids (I added them for easier discussion), not even the <table> itself has an id.
The count of the rows is dynamic, so no tr:nth-child.
Tried
I found this question: Selecting an element which has another element as direct child and used the direct selector (tr:has(> td:contains), but it still selects more than needed, because the outer TD also transitively contains label1 and has a sibling.
Notice that the background I set is transparent to show that multiple TDs are selected.
$(function() {
$('#result').text($('tr:has(td:contains("label1")) > td:nth-child(2)').text())
$('tr:has(td:contains("label1"))').css("background", "rgba(255,0,0,0.3)");
});
table { border-collapse: collapse; }
table, th, td { border: 1px solid black; }
td { padding: 4px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<tr>
<td id="outer">
<table>
<tr><td id="known-info">label1</td><td id="want-to-select">value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
</table>
</td>
<td id="outer-sibling">something else</td>
</tr>
</table>
<br/>
This should be "value1": "<span id="result"></span>"

You could use :not(:has(td)) in your selector so it should be
$('td:contains("label1"):not(:has(td))').next().text()
This will select td that contains label1 text, but it will ignore parent td because it has another td inside.
var el = $('td:contains("label1"):not(:has(td))').next()
$('#result').text(el.text())
el.css('background', 'blue')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="outer">
<table>
<tr>
<td id="known-info">label1</td>
<td id="want-to-select">value1</td>
</tr>
<tr>
<td>label2</td>
<td>value2</td>
</tr>
</table>
</td>
<td id="outer-sibling">something else</td>
</tr>
</table>
<br/> This should be "value1": "<span id="result"></span>"

Delete table rows that are checked using one button

As the title suggests, I have created a table which I am populating with a list, and I also have a checkbox next to each element of that table. Finally I have a button labelled Delete. I want to attach that button with the actual delete operation.
Code of the button (it is inside another table):
<tr id="deleteproject" >
<td width="180" align="center" background="ButtonBackground.png"
onclick = "deleteRow('plist')">
<style="text-decoration:none; display:block; width:100%;
height:100%">
<font size="0.5px"><br/></font>
<font id="DeleteProject" face="verdana" color="white">
DELETE</font>
</a>
</td>
</tr>
The table:
<table ID="plist" border="0" cellpadding="0" cellspacing="0" datasrc="#clicklist"
style="WIDTH: 380px">
<tr>
<td id="projline" width="100%" align="left" valign="middle"
style="margin-left: 16px;">
<input type="checkbox" name="AAA"/>
<font size="3" face="Arial">
<a id="proj" href="urn:a">
<span datafld="Name"
style="margin-left: 20px; line-height: 26px;"></span>
</a>
</font>
</td>
</tr>
</table>
rowDelete function in JS:
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked)
{
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e)
{
alert(e);
}
}
When I select a checkbox from a row and push the delete button, I get an object error, which I think means something is null or not understood in the JS code.

You must create a proper table first. The table is invalid in HTML5 and in HTML4, the button needs to be inside a table. Please read this article.
When I select a checkbox from a row and push the delete button, I get an object error, which I think means something is null or not understood in the JS code.
I don't know where to start ... looking at the JS, you are trying to target rows by referencing them by the TableRow Object? or ChildNode? Either way, the vague error message you are receiving is because you must reference the elements in the DOM as an object. There are several ways to do so in your situation, for example:
The tr needs to be referenced by what they are: <tr> the tag name.
var All_TR_Tags = document.getElementsByTagName('tr');
Now All_TR_Tags is an array-like object
Please review the demo and ask questions because I can't make a list of what is wrong and what issues that need to be addressed because it would take hours. The demo's styling is not part of the topic, I just used it because it's a default style I use for tables. The structure of the table is important as much as the JS though. The source itself has been extensively annotated. Please do not hesitate to ask if you have any further questions.
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>delRows</title>
<style>
.x th {
color: #FFF;
background: #2C7EDB;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.x tr:nth-child(odd) {
background-color: #333;
color: #FFF;
}
.x tr:nth-child(even) {
background-color: #D3E9FF;
color: #333;
}
.x td {
border-style: solid;
border-width: 1px;
border-color: #264D73;
padding: 5px;
text-align: left;
vertical-align: top;
position: relative;
}
.x thead th:first-child {
border-top-left-radius: 6px;
}
.x thead th:last-child {
border-top-right-radius: 6px;
}
.x tbody tr:last-child th:first-child {
border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
th {
width: 30%;
}
th:first-of-type {
width: 10%;
}
table {
width: 80%;
}
</style>
</head>
<body>
<table id="T1" class="x">
<thead>
<tr>
<th>
<input id="btn1" type="button" value="DelRows" onclick="delRows('T1')" )/>
</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>
<input id="chx1" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td>
<input id="chx2" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row3">
<td>
<input id="chx3" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row4">
<td>
<input id="chx4" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row5">
<td>
<input id="chx5" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row6">
<td>
<input id="chx6" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row7">
<td>
<input id="chx7" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row8">
<td>
<input id="chx8" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row9">
<td>
<input id="chx9" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row10">
<td>
<input id="chx10" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<script>
function delRows(tableID) {
//1| Take the function's argument and reference it as an id.
var table = document.getElementById(tableID);
//2| getElementsByTagName()[0]¹ will find the first† element with the <tbody> tag.
/* †You can use [0] to specify the first tag, [1] for the second tag, etc. <tbody> is the direct parent of all <tr>, so that's why we want a reference to it */
var tb = table.getElementsByTagName('tbody')[0];
//3| Collect all checkboxes that are checked into a NodeList² named 'checked'.
/* querySelectorAll³ is like getElementBy* on steroids. It accepts a selector as a target to reference, the syntax is like CSS or inside a jQuery object $(selector). Notice the ":checked"⁴ pseudoselector */
var checked = document.querySelectorAll('input[type="checkbox"]:checked');
//4| Collect all <tr> in <tbody> into a NodeList named 'rows'.
/* Remember we referenced the <tbody> as var tb on step 2? */
var rows = tb.querySelectorAll('tr');
//5| Iterate through the checked NodeList from step 3.
/* When dealing with arrays and array-like objects, you'll need to use a 'for loop' to iterate (or loop)⁵ 90% of the time. */
for (var i = 0; i < checked.length; i++) {
//6| For every checked checkbox find it's parent's parent and name it 'row'.
/* In the checked NodeList, there are all of the checked checkboxes so on each loop we are finding that particular checkbox's "grandmother". Example:
i = 4 means we are on the 3rd iteration (loop).
checked[4] is the third checked checkbox.
.parentNode⁶ is the parent element of the third checked checkbox--a <td>
The second .parentNode is the parent of the <td> which is a <tr> */
var row = checked[i].parentNode.parentNode;
//7| Remove 'row' from <tbody>
/* removeChild⁷ needs the parent of the element (or node) that you intend to remove. Thinking ahead, we have the parent of all <tr>: tb (a.k.a. <tbody>) from step 2. */
tb.removeChild(row);
//8| At this point, i is i+1 we go back to step 5 as long as "i < checked.length".
/* var i = one loop of steps 6, 7, and 8. It started initially as 0 which by design coincides with the 0 count index of arrays and array-like objects like the NodeList checked. i is then incremented by 1 (i++) thereby completing the loop. As long as i is less than the total amount of checked checkboxes, it will continue looping. */
}
//9| At this point, i is greater than the total amount of checked checkboxes and stops looping thru steps 6, 7, and 8.
/* This is the end of the function. Sometimes you'll see "return false;", but we didn't need it because the click event that starts this function is just a button. If we kept the original markup, that used an anchor, then "return false" would be necessary because an anchor by default will jump to a location which is undesirable if you are using the anchor as a button instead. */
}
</script>
</body>
</html>

Check if table tr td is not empty

I want to check if the table tr td still gots the dummy text.
If thats true then a message should appear that they have to enter some text there ( by drag and dropping )
Drag and drop is working thats not the problem i just need to check if the td still got the dummy tekst
else the cannot proceed to the next step
here is my html table layout :
<table width="900px" style="background-color: #dcdcdc;">
<tbody class="sortable">
<tr>
<td>
<table width="90%" style="background-color:#85ca00;; margin:0 auto; border: none; border-collapse: collapse; padding: 0; ">
<tbody>
<tr >
<td align="left" style="padding:10px; " class="dropzone">
s
</td>
<td align="right" style="padding:10px;" class="dropzone">
<p class="dummyTekst">s</p>
</td>
</tr>
</tbody>
</table>
<table width="90%" style="background-color:white; margin:0 auto; background-color:lightgrey;border: none; border-collapse: collapse; padding: 0; ">
<tr style="background-color:white;">
<td width="200px;" style=" vertical-align:top;">
<table style=" border: none; border-collapse: collapse; background-color:lightgrey; margin:10px;" width="100%" align="left" class="dropzone Required ">
<tbody >
<th style="background-color:gray">Menu</th>
<tr ><td ><p style="padding:10px;" class="dummyTekst">Drop content</p></td></tr>
</tbody>
</table>
<table style=" border: none; border-collapse: collapse; background-color:lightgrey; margin:10px;" width="100%" align="left" class="dropzone Required">
<tbody>
<th style="background-color:gray">Menu</th>
<tr><td ><p style="padding:10px;" class="dummyTekst">Drop content</p></td></tr>
</tbody>
</table>
</td>
<td style="vertical-align:top; margin-top:20px;" >
<table style=" border: none; background-color:lightgrey; border-collapse: collapse; margin:10px;" width="90%" align="right" class="dropzone Required">
<tbody>
<th style="background-color:gray">Main Content</th>
<tr ><td ><p style="padding:10px;" class="dummyTekst">Drop content</p></td></tr>
</tbody>
</table>
</td>
</tr>
</table>
<table width="90%" style="background-color:#85ca00; margin:0 auto; border: none; border-collapse: collapse; padding: 0;" class="dropzone">
<tr >
<td align="center" style="padding:10px;" ></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
the p tag is removed if people drop content there
if they didn't a message should appear there
I tried this :
function checkTemplate(){
$jQ('.Required > tbody > tr > td').each(function(index){
if($jQ(this).children().hasClass('dummyText'));
console.log('Empty');
});
}

As I commented:
dummyTekst != dummyText
You're checking for a class dummyText where you provide dummyTekst as actual classname.
Besides that. You don't have to each all the TD's and loop the children. Just check if the class is present. See fiddle: http://jsfiddle.net/z5oyL9cw/
$(document).ready(function(){
if ($(".dummyTekst").length > 0) {
alert('We still have dropzones');
}
});

I would have written it something like this:
function checkTemplate(){
$jQ('table > tbody > tr > td').each(function(index){
if($jQ(this).children('p.dummyTekst').length == 0){
console.log('Empty');
}
});
}

Take a look into jQuery's .each(): http://api.jquery.com/each/
It iterates over every instance of... whatever you want to target. So, yours might be:
$( "td" ).each(function() {
From there, I'd have to look at your javascript to know the best way to check to see if the user changed anything. One option is using jQuery's .has to see if the p exists. http://api.jquery.com/has/ Or you can simply check the child element itself. Once you post your JS, I can say with more certainty.

Why don't you just add a CSS class to your cells (i.e. has-dummy-text) and use it as a flag?
In your example, say for instance:
<table>
<!-- Rest of code ommitted for clarity ... -->
<tbody>
<th style="background-color:gray">Menu</th>
<tr><td class="has-dummy-text"><p style="padding:10px;" class="dummyTekst">Drop content</p></td></tr>
</tbody>
That way you can manage cell's state by adding or removing the class via jQuery's .addClass() or .removeClass() methods, and then check if cell still has your initial dummy-text state by checking with .hasClass() method. (See jQuery class manipulation methods for more info).

If you want to make sure that your child 'p.dummyTekst' is there and also not empty, you should use the .is() from jquery UI. Just to be sure and avoid flying eggs and stuff :P. Also, to place text in the P, use .append.
$jQ('.required > tbody > tr > td').each(function(index){
if( $jQ(this).children('p.dummyTekst').is(":empty") ) {
$jQ(this).children('p.dummyTekst').append("Your text here");
}
});
Please note that browsers can mess around with this, if you have problems using the .is(":empty") try to use $.trim() from jQuery. If he can't trim ( $.trim() ), the element should be empty.
$jQ('.required > tbody > tr > td').each(function(index){
if ( !$jQ(this).children('p.dummyTekst').trim() ) {
$jQ(this).children('p.dummyTekst').append("Your text here");
}
});

I'd try something on the line of this (I don't know JQuery very well, but I do know some JavaScript, and maybe you can convert it; sorry if it isn't helpful.
function checkTemplate() {
var dummy = document.getElementByClassName(dummyTekst);
if(dummy.innerHTML == "s") {
[Your Continue Function]
}
else {
alert(You must have the dummy text!)
}
}

Adding ClassName of td with in the click event

I have use the following code snippet to create the tr of table in Jquery.
Code snippet:
<tr>
<td class="rowcell">
<div>
<div class="intend" style="width: 24px; height: 1px; float: left;"></div>
<div class="style='float:" left'=""></div>
<div style="width: 10px; height: 1px; float: left;"></div>
<div>Task 3</div>
</div>
</td>
<td class="rowcell">
<div>01/01/2013</div>
</td>
<td class="rowcell">
<div>01/05/2013</div>
</td><td class="rowcell">
<div>5 days</div>
</td>
<td class="rowcell">
<div>77</div>
</td>
</tr>
In this case I have invoke the click event for parent of the table. with in the click event I have use the following code snippet to change the className of td to apply the Selection Background, but ClassName cannot change in this case.
Code Snippet
//Here $ganttGridRows table rows.
var $ganttGridRows = $(this.getGanttGridTreeRows());
//Clicking in the row
var row = $target.closest('tr');
var index = $ganttGridRows.index(row);
var item = this.model.currentViewRange[recordIndex];
this.model.selectedRow = this.model.ganttRecords.indexOf(item);
var args = {};
if (this.model.selectedRow != -1)
args = { currentRowIndex: this.model.selectedRow, currrentRow: $ganttGridRows.eq(this.model.selectedRow), currentData: this.model.ganttRecords[this.model.selectedRow] };
if (this._trigger("rowSelecting", args))
return;
this.cleanUpSelection();
this._selectedRowsIndexes = [];
var cell = $target.closest('td');
//Here index is the rowindex of the selected row
$($ganttGridRows[index]).find('.rowcell').addClass("selectionbackground");
But in this did not working while using div with in the td. But if I use without div in td and directly assign the text like below code snippet and it is working fine for me.
Code Snippet
<tr>
<td class="rowcell">Task 1</td>
<td class="rowcell">01/01/2013</td>
<td class="rowcell">01/05/2013</td>
<td class="rowcell">5 days</td>
<td class="rowcell">31</td>
</tr>
Can you pleases any look in to this and provide suggestion to resolve this problem and , explain what is the reason for this behaviour.