We Keep Coding

How to get html td cell value by Javascript

I am trying to get the information from my table td's, using javascript. How can i achieve this? I have tried and failed, because i do not exactly understand the JS. So far, i have managed to get one of them to work, which is 'id' but thats just getting info from the db directly, the td values ive been unable to.
echoing the vals in my php update page shows the id val being passed successfully, but none others.

EDIT
Per your last comment I can recommend you use an event listener on all <td> tags and this way you can just get the relevant text of the specific <td> that the user clicked:
var tds = document.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.addEventListener('click', function(){
console.log(this.innerText)
});
}
<table>
<tr>
<td class="awb">I am the first awb</td>
<td class="awb">I am the second awb</td>
</tr>
<tr>
<td class="differentClass">I am the first differentClass</td>
<td class="differentClass">I am the second differentClass</td>
</tr>
</table>
You are approaching this all wrong...
Instead of this:
var awbno = String(tr.querySelector(".awb").innerHTML);
Do this:
var awbno = document.querySelector(".awb").innerHTML;
Here is a snippet:
var awbno = document.querySelector(".awb").innerHTML;
console.log(awbno);
<table>
<tr>
<td class="awb">Test Text inside a td tag</td>
</tr>
</table>

in order to get the contents of any element using class
let value = document.querySelector('.className').innerHTML;
in order to get the contents of a specific TD
let value = document.querySelector('td.className');

Changing <td> <i> CSS based on the value

I have been asked to implement a small validation on values and if the values are greater or less than 0 i need to change or add/remove the css for the td and i tag
My table looks something like this
<table class="table table-hover" id="studentweek">
<thead>
<tr>
<th>Year</th>
<th">Weeks</th>
</tr>
</thead>
<tbody>
<tr>
<td>VAR (%)</td>
<td class="text-warning"> <i class="classname">-10.65%</i></td>
</tr>
<tr>
<td>VAR (diff)</td>
<td class="text-warning"> <i class="classname">-13,953</i></td>
</tr>
<tr>
<td>VAR (%)</td>
<td class="text-navy"> <i class="classname">8.81%</i></td>
</tr>
<tr>
<td>VAR (diff)</td>
<td class="text-navy"> <i class="classname">11,320</i></td>
</tr>
</tbody>
</table>
currently i am hard coding the css but i would like to be able to dynamicly change these as the values change automatically, can someone suggest the best way to archive this?
i was thinking in my Ajax request to do something like this:
var sdlyvar = $(parseFloat(".classname").text());
if (sdlyvar < 0){
$('.classname').removeClass(".classname").addClass("fa-level-down");
} else {
$('.classname').removeClass(".classname").addClass("fa-level-up");
}

Use JavaScript parseFloat for parsing percentage (http://www.w3schools.com/jsref/jsref_parsefloat.asp).
var percent = $('#sdlyvar').text();
var result = parseFloat(percent) / 100.0;
if (result < 0){
$('#sdlyvar').removeClass("fa-level-up");
$('#sdlyvar').addClass("fa-level-down")
} else {
$('#sdlyvar').removeClass("fa-level-down");
$('#sdlyvar').addClass("fa-level-up")
}

Your first problem is that you can't compare a string like "-10.95%" with an integer, because of the final % symbol. You have to use parseFloat on tha value:
var sdlyvar = parseFloat($('#sdlyvar').text());
It will take care of all the non-numeric stuff after the number.
Then, you'd probably want to remove the opposite class when updating:
if (sdlyvar < 0){
$('#sdlyvar').removeClass("fa-level-up").addClass("fa-level-down");
} else {
$('#sdlyvar').removeClass("fa-level-down").addClass("fa-level-up");
}
A few random suggestions:
Make clear what's wrong in your code when posting on StackOverflow
When referring an element more than once with jQuery, consider putting the selection in a variable, like var $sdlyvar = $("sdlyvar");: faster to type and execute.
Save us some whitespaces when posting code :/

Here .slice will remove the % sign in this code and the rest of the code will compare the value and assign or remove class
var sdlyvar = $('#sdlyvar').text();
if (sdlyvar.slice(0,-1) < 0){
$('#sdlyvar').removeClass("fa-level-up");
$('#sdlyvar').addClass("fa-level-down");
} else {
$('#sdlyvar').removeClass("fa-level-down");
$('#sdlyvar').addClass("fa-level-up");
}

var lis=document.querySelectorAll("tr td i");
for(var i in lis){
if(parseInt(lis[i].innerHTML)<0){
lis[i].className+=" fa-level-down";
}
else{
lis[i].className+=" fa-level-up";
}
}

How to generate JSON dynamically with dynamic properties?

I have a HTML dinamically created table that should be filled by the user.
The user can creates a new SECTION (as many as he want) and he can creates LABELS and its TRANSLATIONS. As many as he wants.
Following is part of the html code:
<table>
<tr class = "section">
<td class = "sectionName">section1</td>;
<td><input type="submit" value="Update"></td>
</tr>
<tr class="lbl_trans_Wrap">
<td class="lbl">lbl_11</td>
<td class="trans"><input type="text" value="trans_11"></td>
</tr>
<tr class = "section">
<td class = "sectionName">section2</td>;
<td><input type="submit" value="Update"></td>
</tr>
<tr class="lbl_trans_Wrap">
<td class="lbl">lbl_21</td>
<td class="trans"><input type="text" value="trans_21"></td>
</tr>
<tr class="lbl_trans_Wrap">
<td class="lbl">lbl_22</td>
<td class="trans"><input type="text" value="trans_22"></td>
</tr>
...
</table>
Than I would like to create a JSON from the values filled by the user.
The object should be like this one:
var lang =
{
section1:
{
lbl_11:"trans_11"
},
section2:
{
lbl_21:"trans_21",
lbl_22:"trans_22"
}
};
To generate the above JSON I am using the following javascript:
var lang ={};
var lbl="";
var trans="";
var section="";
$( "tr" ).each(function() {//Pass trough each line in the table
if($(this).hasClass( "section" )){
section = $(this).children("td.sectionName").html();//Grab all sections
//console.log(section);
}
if($(this).hasClass( "lbl_trans_Wrap" )){
lbl = $(this).children("td.lbl").html();//Grab all labels
//console.log(lbl);
trans = $(this).children("td.trans").children("input.txt_translate").val();//Grab all translation
//console.log(trans);
lang[section]={lbl:trans};
}
});
//console.log(lang);
But the JSON is not being created as expected.
There are 2 issues here:
The lang[section]={lbl:trans} is overriding the last one. So at the end of the process we have only the last one element.
The lbl variable is not being recognized as variable but as a string.
Looks like this:
var lang =
{
section1:
{
lbl:"trans_11"
},
section2:
{
lbl:"trans_21"
}
};
I've tried suggestions from this post and this one.
But they do not use dynamically created property.
I've tried to use push but it not works to objects.
I could create a JSON string and then to parse it.
But I would like to know how to solve this issue in another way.
Any idea in how to generate this JSON dynamically ?
UPDATE:
After James's post, this is the code that works:
$( "tr" ).each(function() {//Pass trough each line in the table
if($(this).hasClass( "section" )){
section = $(this).children("td.sectionName").children("h1").html();//Grab all sections
//console.log(section);
}
if($(this).hasClass( "lbl_trans_Wrap" )){
lbl = $(this).children("td.lbl").html();//Grab all labels
//console.log(lbl);
trans = $(this).children("td.trans").children("input.txt_translate").val();//Grab all translation
//console.log(trans);
if (!lang[section]) {
lang[section] = {};
}
lang[section][lbl] = trans;
}
});
//console.log(lang);

So there are two bugs, one you are overwriting the value of lang[section] with a new object each time. Two, that new object contains a key with the string value "lbl", not the value contained in the lbl variable.
To fix, replace:
lang[section]={lbl:trans};
With:
if (!lang[section]) {
lang[section] = {};
}
lang[section][lbl] = trans;

How to remove the parent element using plain Javascript

How do I remove the parent element and all the respective nodes using plain JavaScript? I'm not using jQuery or any other library.
In other words, I have an element and when user clicks on it, I want to remove the parent of the parent element (as well as the respective children nodes).
<table id='table'>
<tr id='id'>
<td>
Mohit
</td>
<td>
23
</td>
<td >
<span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>
</td>
<td style="display:none;">
<span onClick="save(this)">Save</span>
</td>
</tr>
</table>
Now,
function delete_row(e)
{
e.parentNode.parentNode.removeChild(e.parentNode);
}
Will remove only last <td>.
How do I remove the <tr> directly>?
e.parentNode.parentNode.getAttribute('id')
returns the id of the row...
Is there any function like remove() or delete() ?

Change your function like this:
function delete_row(e)
{
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
}

You can now use node.remove() to remove the whole element
so in your case you'd do
function delete_row(e) {
e.parentElement.remove();
}
You can read more on it here
https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

node.parentNode.parentNode.removeChild(node.parentNode)
Edit: You need to to delete parent of parent, so add one more .parentNode
node.parentNode.parentNode.parentNode.removeChild(node.parentNode.parentNode)

Or for those who like a one-liner
<button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete me</button>

Change this:
onClick="delete_row(this)"
To this:
onClick="removeParents(this, document.getElementById('id'))"
function removeParents(e, root) {
root = root ? root : document.body;
var p = e.parentNode;
while(root != p){
e = p;
p = e.parentNode;
}
root.removeChild(e);
}
http://jsfiddle.net/emg0xcre/

You can specify it even more. Instead of parentElement.parentElement you can do something like this:
static delete_row(element) {
element.closest("tr").remove();
}
The other preferred way of handling such scenario would be event propagation instead of adding onclick to html element:
document.querySelector("#id").addEventListener("click", (e) => {
UI.handleEvents(e.target);
});
static handleEvents(el){
if (el.classList.contains("delete")) {
el.closest("tr").remove();
}
if (el.classList.contains("edit")) {
// do something else
}
if (el.classList.contains("save")){
// save records
}
}
<tr id='id'>
<td>Mohit</td>
<td>23</td>
<td >
<span class="edit">Edit</span> |
<span class="delete">Delete</span>
</td>
<td style="display:none;"><span class="save">Save</span></td>
</tr>

Simple function to do this with ES6:
const removeImgWrap = () => {
const wrappedImgs = [...document.querySelectorAll('p img')];
wrappedImgs.forEach(w => w.parentElement.style.marginBottom = 0);
};

I know it's a little too late, but someone else might find it useful.
e.target.parentElement.parentElement.parentElement.remove()

<div>
<span>1<button onclick="removeParents(this);">X</button></span>
<span>2<button onclick="removeParents(this);">X</button></span>
<span>3<button onclick="removeParents(this);">X</button></span>
<span>4<button onclick="removeParents(this);">X</button></span>
</div>
<script>
function removeParents(e) {
var root = e.parentNode;
root.parentNode.removeChild(root);
console.log(root);
}
</script>
working sample

If you want to delete whatever is inside the <tr> tags, by clicking on the "Delete", give that span a class name (whatever you want).
Then, in JS code: you basically select the element people will click with the document.querySelector(), add an Event Listener to it & on clicking on that span with that .whatever class, the element with the ID name "id" will be removed.
document.querySelector('.wtvr').addEventListener('click', function () {
document.getElementById('id').remove();
});
<table id="table">
<tr id="id">
<td>Mohit</td>
<td>23</td>
<td><span>Edit</span>/<span class="wtvr">Delete</span></td>
<td style="display: none">
<span>Save</span>
</td>
</tr>
</table>
I took the onclick away because you can delete a DOM element just using CSS class and a bit of JS.

I want to iterate the Table using .childNodes, then find the <B> tag. My code doesn't work!

I have a problem in my code. I want to get the b tag that has the style color silver using Javascript. I tried using the tagName === "B" but it didn't work. I figured that the B tags are not children of the rowData class.
<tr class="rowData">
<td style="padding: 0pt;">
<table><tr>
<td>
<b style="font-size: 15px; color: silver;">Mugging</b>
<br />Payout: <b style="color: green;">$200 - $300</b>
<br />Experience: +1 </td>
<td style="text-align: right;">
</td>
</tr></table>
</td>
<td style="padding: 0pt;">
<table><tr>
<td style="width: 100px;">
<b style="color: gray;">Required:</b>
<br />Energy: 1 </td>
<td style="">
</td>
</tr></table>
</td>
</td>
</tr>
I removed some part of it..
Here's some part of the Javascript code:
var jobs = {};
jobs.scan = function() {
var tagHolder = {};
var availJobs = {};
var jobContents = dom.get("app8743457343_content");
var rData = dom.getElementsByClass("rowData", jobContents, "tr");
for(var i = 0; i < rData.length; i++) {
var rChildren = rData[i].childNodes;
for(var j=0; j<rChildren.length; j++) {
if(rChildren[j].tagName === 'B') {
alert(rChildren[j]);
}
}
}
}
jobs.scan();
When I started the script it didn't alert, or responded. Maybe I need to use something to like nextSibling? Please help me figure this out.. I want the b with the style color silver. The Mugging text

You could fight the good fight and try to get that monstrosity working across all browsers....
Or, you could try jQuery! It's fun and easy, and all the cool kids are doing it!
var text = $('tr.rowData').find('b').filter(function() {
return $(this).css('color') == 'silver';
}).text();
alert(text);
Tada!
EDIT: In all seriousness, if you want to do it in raw javascript, this works for me on IE and Firefox:
var text;
var bs = document.getElementsByTagName("b");
for(var x = 0; x < bs.length; x++) {
if(bs[x].style.color == 'silver') {
text = bs[x].innerHTML;
break;
}
}
alert(text);
It is just grabbing all the bold elements in the document and checking to see which one has a color of silver. This is not super efficient, obviously, and I am not sure of your use case. I do see in your code you are first grabbing a reference to a jobContents element. I am not sure where that is coming from as you didn't post that part of the markup, but if the <b> will end up being inside this element, you can change this line:
var bs = document.getElementsByTagName("b");
To this:
var bs = jobContents.getElementsByTagName("b");
Which will then 1) speed it up, 2) make sure you get what you want.
Good luck.

Your code doesn't go down deep enough into the tree. You need at least 4 more levels of childNode "for" loops to get to the "B" tag. If you go this route then you should probably make a recursive function that searches for your "B" tag.