<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
This is my html code.
After clicking the button, the table will change the height and width size.
I want to do this: after changing the size, if user clicks the button again, the table will change back to its original size or maybe it can change the size again as its original size.
Thank you!
If you accept css involved, you can use toggle to toggle certain class to achieve that.
And from, css length, 1000 is not a valid css value, you should use something like '1000px', otherwise the width/height would take no effect.
#myTable.changed {
width: 500px;
height: 300px;
}
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
document.getElementById('myTable').classList.toggle('changed');
return true;
}
</script>
</head>
<body>
<!-- Note that the style you give here would not have an effect, as `height:1000` or `width:400` are not valid css length -->
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
And if css is not in concern, then you can just use a flag to decide the behavior of that function, jsfiddle
<script type="text/javascript">
var changeFlag = false;
function change() {
var table = document.getElementById('myTable');
changeFlag = !changeFlag;
var width, height;
if (changeFlag) { // Click in odd, then change to new w/h
width = '500px';
height = '600px';
} else { // Click in even, change to origin size.
width = '400px';
height = '1000px';
}
table.style.width = width;
table.style.height = height;
return true;
}
</script>
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
if(document.getElementById('myTable').style.height == "400px") {
document.getElementById('myTable').style.height= "1000";
document.getElementById('myTable').style.width= "400";
}
else {
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
}
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
I changed change function to work with your purpose.
Let you check this code
try this :
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
var isToggled = false;
function toggleSize()
{
if(!isToggled)
{
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
isToggled = true;
}
else
{
document.getElementById('myTable').style.height= "900";
document.getElementById('myTable').style.width= "400";
isToggled = false;
}
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="toggleSize()" value="Change It">
</center>
</body>
</html>
Try this
.myTable1 {
height : 1000px;
width : 400px;
}
.myTable2 {
height : 400px;
width : 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change(){
$('#myTable').toggleClass("myTable1");
$('#myTable').toggleClass("myTable2");
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" id="myTable" align="center" class="myTable1">
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
Related
I'm brand new to jquery and javascript and I'm trying to write a simple app that will, when I press a button, copy a row from one table to another and then delete the row from the first table. I have a DeleteRow function that works just fine, but I can't get my "DraftPlayer" function to copy the row. I've tried quite a few of the solutions I've found on the web, but I can't get the syntax just right. You'll see only the second row in the table has the DraftPlayer button as I work this out.
Here are the code snippets I think are critical:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
<script>
function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
</script>
</body>
</html>
Thanks for any suggestions!
You are selecting $('#drafted tbody'); which is not present in DOM at all so you will get nothing. You need to add tbody to your table or you need to change the selector.
<table id="drafted">
<tbody>
<tr>
<th width="36"> Rank </th>
<th width="141"> Player Name </th>
<th width="52">Position </th>
<th width="38">Team </th>
<th width="69"> Bye Week </th>
</tr>
</tbody>
</table>
function DraftPlayer(o) {
var p = $(o).closest('tr');
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow)
p.remove();
}
function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.innerHTML;
//alert(cloneRow )
copyTable.append("<tr>"+cloneRow+"</tr>");
p.parentNode.removeChild(p);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted" border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
</body>
</html>
A lot of mistakes in your code. Go through my code ,I edited it, Works Fine
You need to convert the DOM Element to jquery object in order to use the clone() function.
The modified DraftPlayer() function is:
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = $(p).clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
Suggestions:
There are some problem with your HTML also
Modify the table tag.
<table id="your_id" border="1">
<tbody>
-----------
-----------
</tbody>
</table>
I have the following html structure as shown in this fiddle -
https://jsfiddle.net/0r277q7r/4/
Some rows in the table1 are shwon and hidden on check of checkbox like this -
function hideshow(){
if($('#checkShow').is(':checked')){
$('.before').hide();
$('.after').show();
}else{
$('.before').show();
$('.after').hide();
}
}
Some rows in table1 are hidden and some others are shown when you check the checkbox.
I want to change the height of table2 as and when the height of table1 changes, so that both the tables are of equal height.
What will the jquery code be like?
Thanks.
Your jquery can be reduced to 2 lines with the toggle() function
function hideshow() {
$('.before').toggle();
$('.after').toggle();
}
If you give your main table an id say table1 and change your 2nd table to have an id table3, then give a height to table1 in px then change the height of table2 and table3 to be 100%
function hideshow() {
$('.before').toggle();
$('.after').toggle();
}
#table1 {
height: 100px;
}
#table2 {
height: 100%;
}
#table3 {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" style="border:1px solid black">
<tr>
<td>
<table style="border:1px solid black" id="table2">
<tr class="before">
<td>some content</td>
</tr>
<tr class="before">
<td>some content</td>
<td>some other content</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkShow" onclick="hideshow();" />
</td>
</tr>
<tr class="after" style="display:none">
<td>show only when check is checked</td>
</tr>
</table>
</td>
<td>
<table style="border:1px solid black" id="table3">
<tr>
<td>other div2 stuff here</td>
</tr>
</table>
</td>
</tr>
</table>
Try this :
$(document).ready(function(){
$("#checkShow").on("change",function(){
var state = $(this).prop("checked");
if (state) {
$('.before').hide();
$('.after').show();
}
else {
$('.before').show();
$('.after').hide();
}
})
})
Final code :
<html>
<title>This is test</title>
<head>
</head>
<body>
<table border="1">
<tr>
<td>
<table style="border:1px solid black" id="table2">
<tr class="before">
<td>some content</td>
</tr>
<tr class="before">
<td>some content</td>
<td>some other content</td>
</tr>
<tr>
<td><input type="checkbox" id="checkShow"/></td>
</tr>
<tr class="after">
<td>show only when check is checked</td>
</tr>
</table>
</td>
<td>
<table style="border:1px solid black" id="table2">
<tr>
<td>other div2 stuff here</td>
</tr>
</table>
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#checkShow").on("change",function(){
var state = $(this).prop("checked");
if (state) {
$('.before').hide();
$('.after').show();
}
else {
$('.before').show();
$('.after').hide();
}
})
})
</script>
</body>
</html>
I want to pass the div id from html to a js script dynamically
as such div id r1,r2,r3 needs to be passed in to the getElementById() in jS,so when user mouse over any div,it will get rotated automatically.
This is my first Question,if any Corrections suggested are welcome!
<tbody>
<tr>
<td id="r1"> Roboust</td>
<td id="r2">Dynamic</td>
<td id="r3">Adhere</td>
</tr>
<tr>
<td id="r4">Popular</td>
<td id="r5">Trending</td>
<td id="r6">Favourite</td>
</tr>
<tr>
<td id="r7">Famous</td>
<td id="r8">Blockbouster</td>
<td id="r9">Navie</td>
</tr>
</tbody>
</table>
<h1>CLICK ON BUTTONS TO ROTATE THE BUTTON AS YOU WANT THEM</h1>
<button onclick="rotate() ">Flip Row1</button>
<script>
var rotate = function() {
document.getElementById('r1').style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
}
</script>
</body>
Edited my answer
<html>
<body>
<table>
<tbody>
<tr>
<td id="r1" onmouseover="rotate(this)"> Roboust</td>
<td id="r2" onmouseover="rotate(this)">Dynamic</td>
<td id="r3" onmouseover="rotate(this)">Adhere</td>
</tr>
<tr>
<td id="r4" onmouseover="rotate(this)">Popular</td>
<td id="r5" onmouseover="rotate(this)">Trending</td>
<td id="r6" onmouseover="rotate(this)">Favourite</td>
</tr>
<tr>
<td id="r7" onmouseover="rotate(this)">Famous</td>
<td id="r8" onmouseover="rotate(this)">Blockbouster</td>
<td id="r9" onmouseover="rotate(this)">Navie</td>
</tr>
</tbody>
</table>
<script>
var rotate = function(x) {
if(x.className == "rotated"){
x.style="transform:rotateX(0deg);transition: 0.6s;transform-style:preserve-3d";
x.className = "";
}
else{
x.style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
x.className = "rotated";
}
}
</script>
</body>
</html>
you have several errors try it like this
<table>
<tr>
<td id="r1" onmouseover="rota(r1)"> Roboust</td>
<td id="r2" onmouseover="rota(r2)">Dynamic</td>
<td id="r3" onmouseover="rota(r3)">Adhere</td>
</tr>
</table>
<script>
function rota(i) {
var x = document.getElementById(i);
x.style.transform="rotateX(180deg)";
x.style.transition='0.6s';
}
</script>
</body>
You can also try this way -
<table id="myTable">
<tbody>
<tr>
<td id="r1"> Roboust</td>
<td id="r2">Dynamic</td>
<td id="r3">Adhere</td>
</tr>
<tr>
<td id="r4">Popular</td>
<td id="r5">Trending</td>
<td id="r6">Favourite</td>
</tr>
<tr>
<td id="r7">Famous</td>
<td id="r8">Blockbouster</td>
<td id="r9">Navie</td>
</tr>
</tbody>
</table>
<script>
document.getElementById('myTable').onmouseover = function(event) {
if (event.target.tagName.toUpperCase() == "TD") {
event.target.style = "transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
}
}
</script>
I was planning on making a personal project with JavaScript until I encountered a problem. I have a table that's "Invisible" with css "style.display=none" but when I try to make it "visible" I get "Uncaught TypeError: Cannot read property 'style' of null".
JavaScript Code below:
function attack(){
document.getElementById("list").style.display="block";
document.getElementById("message").innerHTML="";
}
function fire(){
var y=document.getElementById("message");
var x=document.getElementById("demo");
var z=document.getElementById("att");
x.innerHTML=3;
}
function disappear(){
document.getElementById("list").style.display="none";
document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared.</center>";
}
HTML below:
<body onload="disappear()">
<table border="1" >
<tr>
<td><img id="SHP" src="Hp/HPSlayerzach/hp2.png"/></td>
<td></td>
<td><img src="characters/slayerzach/slayerzach.png"/></td>
</tr>
<tr>
<td><p id="demo"></p></td>
<td ><img id="att" src="backgrounds/spacer1.png"/></td>
<td></td>
</tr>
<tr>
<td><img align="right" src="characters/fighterdan13/fighterDan13.gif"/></td>
<td></td>
<td><img id="FHP" src="hp/HPFighterdan13/hp1.png"/></td>
</tr>
<tr>
<td id="message" colspan="2" background="backgrounds/backgroundText.png">
<center><table border="0" id="list">
<tr>
<td style="font-family:verdana;font-size:15px"><center><a onclick="fire()">FIRE</a></center></td>
<td style="font-family:verdana;font-size:15px"><center>LIGHTNING</center></td>
</tr>
<tr>
<td style="font-family:verdana;font-size:15px"><center>WATER</center></td>
<td style="font-family:verdana;font-size:15px"><center>EARTH</center></td>
</tr>
</table></center>
</td>
<td>
<center><table border="0" background="backgrounds/backgroundmenu.png">
<tr>
<td><button id="butAtt" onclick="attack()">Attack</button></td>
<td><button id="butItems" disabled>Items</button></td>
</tr>
<tr>
<td colspan="2"><center><button id="butRun" style="width:110px; height:25px;" disabled>Run</button><center></td>
</tr>
</table></center>
</td>
</tr>
</table>
</body>
Demo FIDDLE
HTML
<body onload="disappear()">
<table border="1" >
<tr>
<td><img id="SHP" src="Hp/HPSlayerzach/hp2.png"/></td>
<td></td>
<td><img src="characters/slayerzach/slayerzach.png"/></td>
</tr>
<tr>
<td><p id="demo"></p></td>
<td ><img id="att" src="backgrounds/spacer1.png"/></td>
<td></td>
</tr>
<tr>
<td><img align="right" src="characters/fighterdan13/fighterDan13.gif"/></td>
<td></td>
<td><img id="FHP" src="hp/HPFighterdan13/hp1.png"/></td>
</tr>
<tr>
<td colspan="2" background="backgrounds/backgroundText.png">
<center><table border="0" id="list">
<tr>
<td style="font-family:verdana;font-size:15px"><center><a onclick="fire()">FIRE</a></center></td>
<td style="font-family:verdana;font-size:15px"><center>LIGHTNING</center></td>
</tr>
<tr>
<td style="font-family:verdana;font-size:15px"><center>WATER</center></td>
<td style="font-family:verdana;font-size:15px"><center>EARTH</center></td>
</tr>
</table></center>
<div id="message"></div>
</td>
<td>
<center><table border="0" background="backgrounds/backgroundmenu.png">
<tr>
<td><button id="butAtt" onclick="attack()">Attack</button></td>
<td><button id="butItems" disabled>Items</button></td>
</tr>
<tr>
<td colspan="2"><center><button id="butRun" style="width:110px; height:25px;" disabled>Run</button><center></td>
</tr>
</table></center>
</td>
</tr>
</table>
</body>
CODE
function attack(){
document.getElementById("list").style.display="block";
document.getElementById("message").innerHTML="";
}
function fire(){
var y=document.getElementById("message");
var x=document.getElementById("demo");
var z=document.getElementById("att");
x.innerHTML=3;
}
function disappear(){
document.getElementById("list").style.display="none";
document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared.</center>";
}
Problem was you replace the message innerhtml on disappear.it remove the table which have id list.so i create div with id message inside the td and remove message id from the td.
The error is with 'document.getElementById("message").innerHTML="";'.There is no element by Id 'message'.Remove it,it works perfectly
The other best practice is to always check whether the element exists in the DOM:
something like below:
if(document.getElementById("message")){
document.getElementById("list").style.display="none";
document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared</center>";
}
try dont use display:none through Javascript but from css, here is the example from your code i modify it a bit on link below
HTML Code
<body>
<td id="message" colspan="2" background="backgrounds/backgroundText.png" >
<table border="0" id="list" style="display:none;">
<tr>
<td style="font-family:verdana;font-size:15px"><center><a onclick="fire()">FIRE</a></center></td>
<td style="font-family:verdana;font-size:15px"><center>LIGHTNING</center></td>
</tr>
<tr>
<td style="font-family:verdana;font-size:15px"><center>WATER</center></td>
<td style="font-family:verdana;font-size:15px"><center>EARTH</center></td>
</tr>
</table>
<button id="butAtt" onclick="attack()">Attack</button>
Javascript
function attack(){
document.getElementById("list").style.display="block";
document.getElementById("message").innerHTML="";
}
jsfiddle
I am trying to populate images into a table. It's like an image that would be a question and the other would be an image that would be an answer and they would be compared in a table. I tried to search online but could not find anything substantial.
<html>
<head>
<title>Game Selection</title>
<script type="text/javascript">
function gameddselected() {
var gamedd = document.getElementById('gamedd');
var x =document.getElementById('scoretable').rows
var a=x[0].cells
var b=x[1].cells
var c=x[2].cells
if (gamedd.value=='1') {
a[0].innerHTML="Game1 Score Table"
} else if (gamedd.value=='2') {
a[0].innerHTML="Game2 Score Table"
} else if (gamedd.value=='3') {
a[0].innerHTML="Game3 Score Table"
} else if (gamedd.value=='4') {
a[0].innerHTML="Game4 Score Table"
}
}
</script>
</head>
<body background="http://1.bp.blogspot.com/_68sk2PaFt3Q/Sl8n81IoRcI/AAAAAAAAEUw/AlnMPEC9uc0/s1600/Disable+File+Indexing+In+Windows++Speed+Up+Windows+By+Disabling+Search+Index+2.jpg" width="80%" height="80%">
<h2 style="text-align: center;">
<span style="font-size:18px;">
<span style="font-family: arial, helvetica, sans-serif;">Please select a Game
</span>
</span>
</h2>
<form action="" method="POST" name="form2">
<div align="center">Select:
<select name="gamedd" id="gamedd" style="width:200px" onChange="gameddselected()">
<option value="1">Game1</option><option value="2">Game2</option>
<option value="3">Game3</option><option value="4">Game4</option>
</select>
</div>
</form>
<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3" ALIGN="CENTER" id="scoretable">
<TR>
<TH COLSPAN="3"><BR><H3>TABLE TITLE</H3></TH>
</TR>
<TR>
<TH>Question Images</TH>
<TH>Answer Images</TH>
<TH>Score</TH>
</TR>
<TR ALIGN="CENTER">
<TD>Data 1</TD>
<TD>Data 2</TD>
<TD>Data 2</TD>
</TR>
</TABLE>
</body>
</html>
I want an image to be produced in place of Data1 in the table. How can that be done?
Any help would be appreciated :)
HTML
<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3" ALIGN="CENTER" id="scoretable">
<TR>
<TH COLSPAN="3"><BR><H3>TABLE TITLE</H3></TH>
</TR>
<TR>
<TH>Question Images</TH>
<TH>Answer Images</TH>
<TH>Score</TH>
</TR>
<TR ALIGN="CENTER">
<TD>Data 1</TD>
<TD>Data 2</TD>
<TD>Data 2</TD>
</TR>
</TABLE>
CODE using jquery and pseudo code
$("#gamedd").change(function(){
if selected == urCriteria then;
var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg');
$(table tr:lastchild td:firstchild).append(img );
});
you can even load the image string url by using ajax call
HTML
<TR ALIGN="CENTER">
<TD id="Data1">Data 1</TD>
<TD id="Data2">Data 2</TD>
<TD id="Data3">Data 3</TD>
</TR>
Code
for(i=1;i<4;i++) {
x=document.getElementById("Data"+i);
x.innerHTML="<img src='/path/to/image"+i+".jpg' />";
// Assuming your images are named [something]NUMBER.jpg
// You could instead use an array
}
RESULT
<div>
<td id="Data1"><img src="/path/to/image1.jpg"></td>
<td id="Data2"><img src="/path/to/image2.jpg"></td>
<td id="Data3"><img src="/path/to/image3.jpg"></td>
</div>