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');
Related
I am trying to use a button inside a table division to set a variable as the same value as another division in the same row, but whenever I run my code (below), it returns the value of all the table divisions concatenated together. I am unsure why this was happening, so I replaced '.children()' with 'childnodes[0]' to try and get only the first name, but this just doesn't work and I don't why.
My html looks like this:
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td><button>Get First Name</button></td>
</tr>
</table>
And my Javascript is this:
$(document).ready(function(){
$("button").click(function(){
var first = $(this).closest("tr").childNodes[0].text();
alert(first)
})
});
set a variable as the same value as another division in the same row
there are lots of possibilities for this, here are some (with the most useful first (opinion based))
$("button").click(function() {
var first = $(this).closest("tr").find("td:first").text();
var first = $(this).closest("tr").find("td").first().text();
var first = $(this).closest("tr").find("td").eq(0).text();
var first = $(this).closest("tr").children().first().text();
var first = $(this).closest("tr").children().eq(0).text();
var first = $(this).closest("td").siblings().first().text();
});
it returns the value of all the table cells concatenated together
https://api.jquery.com/text
Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.
because you're passing the "tr" to text() it gets the text of all the cells (tds) and their content etc and combines them as one, so you need to limit to the first as you've attempted.
however .childNodes[0] can only be applied to a DOM element/node, while $(this).closest("tr") gives you a jquery object/collection, which doesn't have .childNodes property.
So the jquery equivalent would be to use .children().eq(0).
You could use class identifiers to get information you need as well.
<table>
<tr>
<td><span class="first-name">John</span></td>
<td><span class="last-name">Doe</span></td>
<td>
<button class="btn-get-data" data-class="first-name">Get First Name</button>
<button class="btn-get-data" data-class="last-name">Get Last Name</button>
</td>
</tr>
</table>
$(document).ready(function() {
$(".btn-get-data").click(function() {
$btn = $(this);
$tr = $btn.closest('tr');
var first = $tr.find('.' + $btn.attr('data-class')).html();
alert(first);
})
});
If you make the button click generic like so, you can add additional buttons on the page and use that to get the class within that row.
Here is a working fiddle example: https://jsfiddle.net/b1r0nucq/
you could find the :first child and get his html(), as below:
$(document).ready(function() {
$("button").click(function() {
var first = $(this).closest("tr").children(":first").html();
alert(first)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td><button>Get First Name</button></td>
</tr>
</table>
I would like to create one additional row in HTML Table which is very common and can be done if we have id or class available of that table.
But in my case I have one page which contains many forms and tables.
But in all those I have one form which contains only one element i.e table and I would like to create one more row and move few columns from 1st row to newly created row.
For this I have created simple HTML page.Please find below code and help me to achieve my output.
<h:form id="myForm">
<table>
<tr>
<td id="col1">Item Info</td>
<td id="col2">Description</td>
<td id="col3">Product</td>
<td id="col4">Keywords</td>
<td id="col5">Documents</td>
<td id="col6">Image</td>
<td id="col7">Video</td>
</tr>
</table>
</h:form>
Here Ia m getting output like
Item Info Description Product Keywords Documents Image Video
But I want to achieve something like below:
Item Info Description Product Keywords
NEW CELL1 Documents Image Video
means I would like to remove few columns from existing row and I would like to add it in newly created row.
For this I have written Javascript like:
<script type="text/javascript">
window.onload = function() {
split();
};
function split() {
var form = document.getElementById("myForm");
var table = form.elements[0];
var tr = document.createElement("tr");
tr.id="row2";
table.appendChild(tr);
var cell = tr.insertCell(0);
cell.innerHTML = "NEW CELL1";
var col5 = document.getElementById("col5");
tr.appendChild(col5);
var col6 = document.getElementById("col6");
tr.appendChild(col6);
var col7 = document.getElementById("col7");
tr.appendChild(col7);
}
</script>
Here, My problem is this entire form will be generated automatically so I can't give the Id for the table and with this script it is not identifying my table when I am giving form.elemets[0];
I want to find table element so that I can create row in that table.
You can find the table by doing this:
Get one of the elements in a table row, and get the parent node until you've got the table. In this case you could do document.getElementById('col1').parentNode.parentNode
And just to ease things,
You can insert this string '</tr><tr>' in a row, after a table cell, to easily create a new row.
This should be better than document.getElementsByTagName('table'), because if you have lots of tables which are far away, it will take more time to find your table's index in that array.
Use getElementsByTagName to get the table from within your form, which has an ID
window.onload = function() {
split();
};
function split() {
var form = document.getElementById("myForm");
var table = form.getElementsByTagName("table")[0];
var tr = document.createElement("tr");
tr.id = "row2";
table.appendChild(tr);
var cell = tr.insertCell(0);
cell.innerHTML = "NEW CELL1";
/*Your original code produces duplicate IDs which is a BAD thing*/
var col5 = document.getElementById("col5");
/*Update new Id*/
col5.id += "_new";
tr.appendChild(col5);
var col6 = document.getElementById("col6");
/*Update new Id*/
col6.id += "_new";
tr.appendChild(col6);
var col7 = document.getElementById("col7");
/*Update new Id*/
col7.id += "_new";
tr.appendChild(col7);
}
<form id="myForm">
<table>
<tr>
<td id="col1">Item Info</td>
<td id="col2">Description</td>
<td id="col3">Product</td>
<td id="col4">Keywords</td>
<td id="col5">Documents</td>
<td id="col6">Image</td>
<td id="col7">Video</td>
</tr>
</table>
</form>
You also have a mismatch of column numbers, with the code provided you originally have 7 columns and only insert 4, this will produce inconsistent results, make sure to use the colspan attribute as needed.
You should be able to use JavaScript's querySelector method to select the table data you want to remove from the document.
Something like var rowToDeleteOrAddTo = document.querySelector("#myForm > table > tr > td"); should help you get there. You'll need to lookup CSS Selectors to get the specific selectors you need. You may need to use the textContent property once you have a node to make sure you are deleting the right one.
I am having trouble changing a background color of a table cell based on its value. I have made it work using the
var elems = document.getElementsByTagName(td);
But I would like to make it check the number with an ID tag. The reason is because I will have multiple rows where the variable range of good and bad (green or red) will be different.
My javascript looks like:
var elems = document.getElementById("cho");
for (var i=0, m=elems.length; i<m; i++) {
if (elems[i].innerHTML>7)
{ elems[i].style.background="#ef0401";}
if (elems[i].innerHTML<=7)
{ elems[i].style.background="#4CB900";}
}
I tried looking this up, do I have to replace innerHTML with children?
Here is the HTML
<table class="medical">
<tr>
<td class="type-txt bg-left"><span class="type-name">Total Cholesterol</span><span class="sm-font">A Type of Fat</span></td>
<td class="bg-right" id="cho">80</td>
</tr>
<tr>
<td class="type-txt bg-left"><span class="type-name">LDL</span><span class="sm-font">"Bad" Cholesterol</span></td>
<td class="bg-right" id="ldl">1</td>
</tr>
</table>
A link to jsfiddle
In my application i use a framework that generates a table with the id of the cells at Run-Time in ascending order.
So that i have "ElementX1X1" for row1 and column1, "ElementX1X2" for row1 and column2 etcetc...
The HTML structure generated will be:
<tr>
<td class="my_msg" align="left">
<id="ElementX1X1">
what i can set is the class(my_msg) and the content of the cell(of the table).
I want simply make:
var test=document.getElementById("ElementX1X1");
test.onclick=function();
but i'm not able to recognize the cell...
i want to make getElementById only if it is in the class "my_msg" or only if it has a certain content(as i said the only two things i can set)...
Anyone has any idea on how i can solve the problem?!
Thanks in advance!
Update the HTML to:
<td id="ElementX1X1" class="my_msg" >...
Edited - to work around broken framework:
<tr>
<td class="my_msg" align="left">
<id="ElementX1X1">
some content
</td>
<td class="my_msg" align="left">
<id="ElementX1X2">
some content
</td>
</tr>
If you want to find row 1 column 2, you can cheat using a bit of jQuery to inspect the contents of the element:
var row = 1;
var column = 2;
var matched = null;
$(".my_msg").each({
if($(this).html().indexOf('<id="ElementX' + row + 'X' + column + '">')!=-1){
matched = $(this);
}
});
matched will either point to the element you're looking for or null - but if you already know the row and column id's of the cells then why not just walk the DOM?
var row = 1;
var column = 2;
var matched = null;
var table = document.getElementsByTagName("TABLE")[0]; // up to you how your find it
try {
matched = table.getElementsByTagName("TR")[row-1].getElementsByTagName("TD")[column-1];
}
catch(err) {
// not found
}
Or the brute force way (i.e. fix the framework output):
var table = $("#tableid"); // up to you how your find it
table.html(table.html().replace(/">\n<id="/g,'" id="'));
your code is now:
<tr>
<td class="my_msg" align="left" id="ElementX1X1">…</td>
<td class="my_msg" align="left" id="ElementX1X2">…</td>
…
so you can use
$("#ElementX2X1");
to select the first row, second column
Neither is particularly elegant, but should get the job done while you wait for your buggy framework to be fixed ;)
I would like to hide the entire age column on this table.
<table id="displayTable">
<tr>
<td class="Name"></td>
<td class="Phone"></td>
<td class="Age"></td>
</tr>
</table>
Javascript follows to hide Age cell -
var table = document.getElementById('displayTable');
var tableRow = table.getElementsByTagName('tr');
for (var row = 0; row < tableRow.length; row++) {
var cells = tableRow[row].getElementsByTagName('td')
cells[2].style.display='none';
}
error says -
"2.style is null or not an object."
What am I missing?
Well, first of all, check your table id. You have it set to 'displayTable' but you're attempting to look it up by 'displayLossTable'.
When i fix that id, and plug your code into jsFiddle, everything works.
what does alert(cells[2]) give you? Alternatively you should try add/remove class instead of inline styles:
el.className+= 'hide'