I have this code in my website is there any way to change text inside (td) tag in table using javascript
<div id="mvctable">
<table width="100%">
<tbody>
<tr>
<td style="font-size:2; text-align:Right;color:#ffffff;">
<img src="https://babilsport.com/wp-content/plugins/mechanic-visitor-counter/counter/mvcvisit.png"> Visit Today : 1
</td>
</tr>
<tr>
<td style="font-size:2; text-align:Right;color:#ffffff;">
<img src="https://babilsport.com/wp-content/plugins/mechanic-visitor-counter/counter/mvcmonth.png"> This Month : 1
</td>
</tr>
<tr>
<td style="font-size:2; text-align:Right;color:#ffffff;">
<img src="https://babilsport.com/wp-content/plugins/mechanic-visitor-counter/counter/mvctotal.png"> Total Visit : 1
</td>
</tr>
</tbody>
</table>
</div>
You need to find the td node you want to change via javascript. The most direct is to add an unique id attribute to the td you want to edit. Then use .textContent to set it.
document.getElementById("uniqueIdHere").textContent="newtext";
If you can't add unique ids then you will need to find via a known position or via the existing text in the td tag.
firstTD = document.getElementById("mvctable").querySelector('td');
firstTD.textContent="newtext";
You could get all of the TDs and loop through
tdElements = document.getElementById("mvctable").getElementsByTag('td');
for(var i = 0; i < tdElements.length; i++){
//do something to each td like
tdElements[i].textContent = "something new...";
}
Need more info to give you more details.
Related
Here's my problem, I want to modify a database from a "modify" button, which is on the column of the content to be modified.
<tr class ="xyz" id="5">
<td> sd</td>
<td> none</td>
</tr>
This is the fifth column of my table.
I'd like to get the text contained in each <td> and send them to a js function, is there a way to do it ?
Thank you,
You could select all tds inside the row with the id "5" via querySelectorAll and then loop through them.
let tds = document.querySelectorAll('[id="5"] td');
for (let i = 0; i < tds.length; i++) {
console.log(tds[i].textContent);
}
<tr class ="xyz" id="5">
<td> sd</td>
<td> none</td>
</tr>
If you use an id or class name that starts with a digit, you can't use the "#" and "." selectors.
Having this HTML structure :
<tr class ="xyz" id="5">
<td> sd</td>
<td> none</td>
</tr>
Here is the way to do it.
let tds = Array.from(document.getElementById('5').cells).map(function(elt) {
return elt.innerHTML;
}) // tds will now contains [' sd', 'none'];
You can use DOM to achieve this:
<table id="myTable">
<tr id="5">
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
var x = document.getElementById("myTable").rows.namedItem("5").cells;
console.log(x[0].innerHTML);
console.log(x[1].innerHTML);
output：
output
Then you can change the content of the cell by :
x[0].innerHTML = "new content";
x[1].innerHTML = "new content";
I've got many chunks of HTML coming into my app which I have no control over. They contain tables for layout, which I want to get rid of. They can be complex and nested.
What I want is to basically extract the HTML content from the tables, so that I can inject that into other templates in the app.
I can use jQuery or plain JS only, no server side trickery.
Does anyone know of a jQuery plugin of good tip that will do the job?
Littm - I mean to extract content from the td tags essentially. I want no trace of table left in the code when it's done. Thanks!
Here's an example of the type of HTML in question. It all comes in via XHR from some ancient application so I have no control over the markup. What I want is to get rid of the tables completely, leaving just the rest of the HTML or other text content.
<table>
<tr><td colspan="4"></td></tr>
<tr>
<td width="1%"></td>
<td width="40%" style="padding-left: 15px">
<p>Your access level: <span>Total</span></p>
</td>
<td width="5%">
<table><tr><td><b>Please note</b></td></tr></table>
</td>
<td width="45%" style="padding-left: 6px" valign="top"><p>your account</p></td>
</tr>
<tr><td colspan="4"> </td></tr>
<tr>
<td width="1%"></td>
<td width="40%" style="padding-left: 15px">
<table>
<tr>
<td align="right">Sort Code: </td>
<td align="center"><strong>22-98-21</strong></td>
</tr>
<tr>
<td align="right">Account Number: </td>
<td><strong>1234959</strong></td>
</tr>
</table>
</td>
<td width="5%"></td>
<td width="45%" style="padding-left: 6px">Your account details for</td>
</tr>
</table>
I've tried;
var data = ""
$("td").each(function(){
data += $(this).html()
});
$("article").append(data);
$("table").remove();
But var data still contains nested td tags. I'm no JS expert so I'm not sure what else to try....
Let's suppose that you have X number of tables.
In order to extract all the content information from these, you could try something like this:
// Array containing all the tables' contents
var content = [];
// For each table...
$("table").each(function() {
// Variable for a table
var tb = [];
$(this).find('tr').each(function() {
// Variable for a row
var tr = [];
$(this).find('td').each(function() {
// We push <td> 's content
tr.push($(this).html());
});
// We push the row's content
tb.push(tr);
});
// We push the table's content
content.push(tb);
});
So for instance, if we have the following 2 tables:
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>A</td>
</tr>
</table>
<table>
<tr>
<td>r1</td>
<td>r2</td>
<td>r3</td>
</tr>
<tr>
<td>rA</td>
<td>rB</td>
</tr>
<tr>
<td>rP</td>
</tr>
</table>
The array content will be something like this:
content = [ [ [1, 2], [A] ] ] , [ [r1, r2, r3], [rA, rB], [rP] ] ]
\_______________/ \______________________________/
1st table 2nd table
and if you want to access the first table, you'll just have to access content[0] for instance.
Now, let's suppose that you have a DIV, with and id my_div, and that you want to output some table content in it.
For example, let's suppose that you only want to have the 1st table only. Then, you would do something like this:
// Note: content[0] = [[1, 2], [A]]
var to_print = "<table>";
for(var i=0; i<content[0].length; i++) {
to_print += "<tr>";
for(var j=0; j<content[0][i].length; j++)
to_print += "<td>"+ content[0][i][j] +"</td>";
to_print += "</tr>";
}
to_print += "</table>";
$("#my_div").html(to_print);
which will give you something like this:
<div id="my_div">
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>A</td>
</tr>
</table>
</div>
Hope this helps.
Edit: You should create a recursive function to do that.
Simply create you function that gets "td"'s as a value:
function searchTexts(td) {
if (td.find("td")) {
searchTexts(td.find("td"));
}
td.each(function(){
data += $(this).html()
$(this).remove(); // remove it for avoiding duplicates
});
}
Then call it passing a jQuery object to the function.
I have the following test html:
<table width="80%" border="0" cellspacing="0" cellpadding="1" >
<tr>
<td class="tableBorder">
<table id="scriptsT" name="scriptsT" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="4" class="tableTitle">› College Foo - ScriptList:</td>
</tr>
<tr class="rowHeaders">
<td width="4%">ScriptName</td>
<td width="2%">Main Script (Radio)</td>
<td width="2%">(Ext)</td>
<td width="2%">Del Script</td>
</tr>
<tr id="foo[1]" name="foo[1]" class="rowHeaders">
<td id="sTD" name="sTD" width="4%">Script1</td>
<td width="2%">
<input type="radio" name="main" id="main" value="">
</td>
<td id="tTD" name="tTD" width="2%">Php</td>
<td width="2%"><input type="Button" class="textbox" name="SelScript" id="" value="DelScript" onClick="javascript: DelScript(1); return false;"></td>
</tr>
</table>
</td>
</tr>
</table>
=======================================================
I'm trying to remove the node, using the "DelScript function, that tries to use an ID to select the given TR, based on each TR having a unique ID, in this case foo[1], etc..
In my test DelScript, I 1st get the table, and then try to get the childnode (the "TR") to delete.
//--handle/simulate the deletion of the tr in the scriptTBL for the id
function DelScript(id)
{
var scriptTBL=document.getElementById("scriptsT");
var a="foo["+id+"]"
var test=document.getElementById("foo[1]");
//scriptTBL.parentNode.removeChild(test);
scriptTBL.removeChild(test);
alert("foo");
var a;
}
However, I'm screwing something up, as I'm not able to delete the node.
I'm running FF4, and firefox seems to be saying the node can't be found (???).
I've also tried using the parentNode a well but get the same results.
Thank you for any pointers.
If you just want to
"delete the TR where the clicked 'delete' button is located"
You don't need any of those id attributes.
<input type="Button" onclick="DelScript(this);return false;">
function DelScript(theClickedButton) {
var tr = theClickedButton.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
The table rows are not children of the <table>, they're children of the <tbody> element inside it. Even if there's not a <tbody> in your markup, there's one in the DOM. You could go up the DOM from the child element itself, or you could find the <tbody>
var tbody = document.getElementById('scriptsT').getElementsByTagName('tbody')[0];
FF is likely inserting a <tbody> element in between your <table> and <tr>, as the HTML specification demands. You don't even need to know the table ID. The attempt you commented out was almost right, but you need test.parentNode instead of table.parentNode - you want to get the row's parent node, not the table's:
function deleteRow(n){
var el = document.getElementById('foo['+n+']');
return el.parentNode.removeChild( el );
}
The TR is not a child of the TABLE. It is a child of the TBODY that is implicitly a child of the TABLE. Try this:
scriptTBL.children[0].removeChild(test);
Also, install FireBug so that you can browse the DOM tree and set breakpoints in your scripts to examine what they are doing to the dynamically rendered HTML.
I'm looking for some help on the Javascript angle of this problem. I have a table that goes like...
<table>
<tbody>
<tr> (Row 1)
<td colspan="3">
<p>This Says Something</p>
</td>
</tr>
<tr> (Row 1a)
<td>
<select option>
</td>
</tr>
<tr> (Row 2)
<td colspan="3">
<p>This Says Something</p>
</td>
</tr>
<tr> (Row 2a)
<td>
<select option>
</td>
</tr>
<tr>
<td colspan="3">
<p>This Says Something</p>
</td>
</tr>
<tr>
<td>
<select option>
</td>
</tr>
<tbody>
</table>
There are actually more like 20 rows and row a's but I didn't think I'd want to copy them all.
I basically need to add a container row (a single row) around every two rows (# and #a). Something like:
<tr> (Container Row 1)
<td>
+<tr> (Row 1)
+<tr> (Row 1a)
</td>
</tr>
It needs to cycle through the whole table. Somehow it has to retain the HTML data inside since all of the "a"s have options.
I hope this makes sense...
Any help would be greatly appreciated, as I'm at a loss. I'm novice at best at javascript and am struggling my way through the DOM and TOM methods.
Thank you so much in advance for any help or headway.
[EDIT] For clarification, the table is already constructed from a third party database, I am editing it after it's constructed. I guess this clarifies why it would have to be javascript to be done through the DOM.
Embed another table:
<tr> (Container Row 1)
<td>
<table>
<tr><td>(Row 1a)</td></tr>
<tr><td>(Row 1b)</td></tr>
</table>
</td>
</tr>
Or if you are wanting to do that via Javascript, you can give the parent <td> an id and set it's innerHTML.
<tr> (Container Row 1)
<td id='rowX'>
</td>
</tr>
document.getElementById('rowX').innertHTML = "<table><tr><td>(Row 1a)</td></tr><tr><td>(Row 1b)</td></tr></table>";
As mentioned in another answer you can't add tr elements directly in td like you are trying.
You would first create an inner table.
If you were using jQuery you would do something like this:
//setup some click actions just to prove that they remain attached even after moving
$('#outterTable tr').click(function(){
alert('You clicked on row: '+$(this).text());
});
//update the table (group each even row with the one after it)
$('#outterTable tr:even').each(function() {
var $tr1 = $(this),
$tr2 = $tr1.next('tr'),
$t = $('<table></table>');
$('<tr></tr>').append($t).insertBefore($tr1);
//click actions will remain attached
//if that is not required, than use $tr1.remove()
$t.append($tr1).append($tr2);
});
See this live jsFiddle example.
without jQuery it may look like that:
<script type="text/javascript">
<!--
function fx(table)
{
var tmp=document.createElement('table');
tmp.appendChild(document.createElement('tbody'))
while(table.rows.length)
{
if(table.rows.length%2==0)
{
var wrapper=tmp.lastChild.appendChild(document.createElement('tr'));
wrapper.appendChild(document.createElement('td'));
wrapper.getElementsByTagName('TD')[0].appendChild(document.createElement('table'));
wrapper.getElementsByTagName('TD')[0].lastChild.appendChild(document.createElement('tbody'));
}
wrapper.getElementsByTagName('TD')[0].lastChild.lastChild.appendChild(table.getElementsByTagName('TR')[0])
}
table.parentNode.replaceChild(tmp,table);
tmp.setAttribute('border',1);
}
window.onload=function(){fx(document.getElementsByTagName('table')[0]);}
//-->
</script>
Example#jsFiddle
But: why do you need this grouping?
If the only benefit is a visible grouping I would prefer to do this by setting the borders of the cells .
Give all cells a border and to the even a border-top:none / to the odd a border-bottom: none
I have been working on this and cannot get this iterator to work. I have the following HTML and am trying to iterate through all rows (except the first row) and extract the values in cells (td) 2 and 3 :
<div id="statsId">
<table width="220" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="65"/>
<td width="90"/>
<td width="65"/>
</tr>
<tr style="font-weight: bold;">
<td align="left">$1.00</td>
<td>
UserID1
</td>
<td>Single</td>
</tr>
<tr>
<td align="left">$6.99</td>
<td>
UserID2
</td>
<td>Multiple</td>
</tr>
<tr>...
.....(snip)
I tried the following iterator to iterate through all except the first row of the table that is a child of "div#statsID" and get the values of the 2nd and 3rd cells (in the example, the first extracted cells would have values of "UserID1" and "Single"), but it doesn't work.
$('div#statsId > table tr:not(:nth-child(1))').each(function(i, ele) {
var secondCol = $('td:nth-child(2)', ele).innerHTML
var thirdCol= $('td:nth-child(3)', ele).text()
.....
});
Any suggestions on how to specify and iterate through the rows (except the first) of a table that is a child of a div would be appreciated.
$("#statsId > table tbody tr:not(:first)").each ( function() {
var secondCol = $(this).find('td:nth-child(2)').html();
var thirdCol= $(this).find('td:nth-child(3)').text();
});
Note
You can use the id selector independently. No need to use the tag name.
There is no innerHTML for a jQuery object. Use html() instead