Hello, plese, I have 3 table cells and I would like to index them from 1 to 3 or anyhow in the queue.
Please, how can I do it, anz hints, I appologise I am complete beginner in js!!!
many thanks!!!
<html>
<head>
</head>
<body>
<table id="ta" width="300px" height="100px" border="2px">
<tr>
<td></td>
<td></td>
<td></td>
<tr>
</body>
</html>
Please, I tried to create table containing just 3 cells. Tried to nest functions. Please, does someone see the mistake:
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the button to create a TABLE, a TR and a TD element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
for(i=0; i<5; i<++)
{
function myFunction1{
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);
var y = document.createElement("TR");
y.setAttribute("id", "myTr");
document.getElementById("myTable").appendChild(y);
var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("myTr").appendChild(z)};
}
}
</script>
</body>
</html>
Manz thanks!!!
Use the table DOMElement:
tabElement = document.getElementById("ta");
Get an array of “td” elements using:
tdElements = tabElement.getElementsByTagName("td");
You can use the variable y instead of ‘document.getElementById(“tr”)’, and add the loop here:
for (i=0; i<3; i++){
var z = document.createElement(“TD”);
var t = document.createTextNode(“cell”);
z.appendChild(t);
y.appendChild(z)};
}
Hello, I get colors in cells using style in had, but not using DOM…please, can someone help?MANY THANKS!!!
<!DOCTYPE html>
<html>
<head>
<style>
td {
background-color: pink;
</style>
</head>
<body>
<table id="ta" width="300px" height="100px" border="2px">
<tr>
<td></td>
<td></td>
<td></td>
<tr>
</table>
<script>
tabElement=document.getElementById("ta");
t=tabElement.getElementsByTagsName("td");
t[0].style.backgroundColor="blue";
</script>
</body>
</html>
Put the script in the head of the HTML document,
put your code in a function, and create a call to the function in the ‘onload’ attribute of the body:
Body:
<body onload="func();">
Script:
function func(){
tabElement=document.getElementById("ta");
t=tabElement.getElementsByTagsName("td");
t[0].style.backgroundColor="blue";
}
EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.
Like this:
<!DOCTYPE html>
<html>
<head>
<script>
function func(){
tabElement=document.getElementById("ta");
t=tabElement.getElementsByTagsName("td");
t[0].style.backgroundColor="blue";
}
</script>
</head>
<body onload="func();">
<table id="ta" width="300px" height="100px" border="2px">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
BBut this does not work too…is that my mozilla browser???
There’s a slight mistake in the function name for getting the array of cells. It should be:
t=tabElement.getElementsByTagName("td");
many thanks u are really ingenious!!!
Now trying to put color values form head to loop…
Please, where is mistake here
<!DOCTYPE html>
<html>
<head>
<script>
for (i=0; i<3; i++){
function func(){
tabElement=document.getElementById("ta");
t=tabElement.getElementsByTagName("td");
t[i].style.backgroundColor="rgb(0,0,255)";
};
}
</script>
</head>
<body onload="func();">
<table id="ta" width="300px" height="100px" border="2px">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Get the loop inside the function.
Please, what is wrong here (I want each cell to get another -20 tint of blue):
<!DOCTYPE html>
<html>
<head>
<script>
function func(){
for (i=0; i<3; i++){
var n=255;
tabElement=document.getElementById("ta");
t=tabElement.getElementsByTagName("td");
t[i].style.backgroundColor="rgb(0,0,n)";
n=n-20;
};
}
</script>
</head>
EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.
<!DOCTYPE html>
<html>
<head>
<script>
function func(){
var n=255;
for (i=0; i<3; i++){
tabElement=document.getElementById("ta");
t=tabElement.getElementsByTagName("td");
t[i].style.backgroundColor="rgb(0,0,n)";
n=n-20;
};
}
</script>
</head>
What an antiquated approach (that’s how it was done about two JavaScript versions back).
,Almost all JavaScript should be placed immediately before the </body> tag and inline event handlers are completely unnecessary - where you do need to process events (which isn’t necessary here) you use an event listener in the script itself.
It is also unnecessary to use the generic DOM calls on the individual table elements as there are special DOM calls specifically for tables that are far more efficient. See http://javascriptexample.net/domtable.php for a series of examples of all of the different table DOM calls including ones that can modify specific cells and even generating entire tables with only two createElement calls.
And the great thing about software is that you can attack a problem in many different ways. We like to call that personal “style”.
Is that to say that teaching document.write techniques to students today is the application of a teacher’s personal style?
Some around here would say that calls for a good ol’ fashioned hanging 
Sometimes there’s a good reason to keep the old… Like when you’re building a template for e-mail… and you know what the say, history repeats itself and evertything comes back in fashion 
Yes you can but the more antiquated approaches to JavaScript create a lot more work for the person maintaining the jumbled mess plus it eliminates the possibility of their using many of the new features that modern browsers provide.
For example all modern browsers support XHTML5 and XHTML does not allow document.write at all.
Also there is a security header available to disable any inline JavaScript so as to make injection almost impossible - you can’t use that security header if you jumble your JavaScript and HTML together (as is required for injection).
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.