inserting img into table

Question

severman 0 Junior Poster in Training

14 Years Ago

hi all!
i have a question.
i want to add an img to a specific cell in a table(which is inside a form) with inside a javascript function.

(i greened which function i use, which cell i want, and which img i want)

this is the code i write so far:

<html>
<head>
<title>Black Jack</title>
<link rel="stylesheet" type="text/css">
<Script Language="JavaScript">

var h;

[B]function hit(f,i)[/B]{
	var cards = new Array();
	cards[0]="./Cards/cl1.gif";
	
	 
   h=f.money.value;
  f.money.value = h-i;
  h=f.money.value;
  
}
  
  function reset(f)
  {
	  f.money.value=4000;
	  alert("bla bla");
	  
	  }

</Script>

<style type="text/css">
.buttonStyle1 {

background-color:#FFF;
background-image:url(c255.jpg);
width:40%;
height:92%;
 }
 .buttonStyle2 {

background-color:#FFF;
background-image:url(c50.jpg);
width:80%;
height:92%;
 }
.buttonStyle3 {

background-color:#FFF;
background-image:url(c100.jpg);
width:80%;
height:92%;
text-align:center;
 }

</style>


</head>

<body>
<form name="bj">
<table width="100%" height="100%" border="1">

  <tr align="center" height="25%">
    <td>Money:<input name="money" value="4000" type="text"  size="4" /> $</td>
    <td><input type="button" name="c25" class="buttonStyle" value="stam" /></td>
    <th>&nbsp;</td>
    <td></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td></td>
  </tr>
  <tr align="center" height="25%" width="100%">
    <td width="30%"><input type="button" name="c25"  class="buttonStyle1" onClick="hit(this.form,25);"/></td>
    <td width="15%"><input type="button" name="c50" class="buttonStyle2" onClick="hit(this.form,50);"/></td>
    <td width="15%"><input type="button"  name="c100" class="buttonStyle3" onClick="hit(this.form,100);"/></td>
  	<td><input type="button"  value="Hit Me" onClick= "hit(this.form,100);"/></td>
    <td><input type="button"  value="Hold" /></td>
    <td><input type="button" value="Deal Again" onClick="reset(this.form);" /></td>
  </tr>

</table>
</form>



</body>
</html>

is it possible to do something like that?

javascript

2 Contributors
5 Replies
121 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by essential

All 5 Replies

essential 84 Posting Shark

14 Years Ago

Hi severman,

here's a little example on how to deal in such thing, w/o touching the the structure of your hit(arg1, arg2) function, i just added a few lines for the insertion of your image.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Black Jack</title>
<style type="text/css">
<!--
.buttonStyle1 {
  background-color : #FFF; 
  background-image : url(c22.jpg);
  width : 40%;
  height : 92%; }
.buttonStyle2 {
  background-color : #FFF; 
  background-image : url(c50.jpg);
  width : 80%;
  height : 92%; }
.buttonStyle3 {
  background-color : #FFF; 
  background-image : url(c100.jpg);
  width : 80%;
  height : 92%;
  text-align : center; }
-->
</style>
<script type="text/javascript">
<!--
var hit = function( f, i ) {
var f = f || null;
var i = i || null;
var h = f.money.value * 1;
var cards = [];
cards[ 0 ] = new Image();
cards[ 0 ].src = "Cards/cl1.gif";
var ie;
var table = document.getElementById("table1"); // Table-body

   (( !table && ( ie = document.all.table1 )) ? table = ie : ie = 0 );

var row2cell1 = table.rows[ 1 ].cells( 1 ); // Target row in range2 column1
   f.money.value = h - i;
   h = f.money.value;
   if ( row2cell1.innerHTML.indexOf( String( cards[ 0 ].outerHTML )) !== -1 )
   row2.cell1.removeChild( cards[ 0 ] );
   row2cell1.appendChild( cards[ 0 ] );
};
var reset = function( f ) {
   f.money.value = 4000;
   alert( "bla bla" );
};
// -->
</script>
</head>
<body>
<form id="bj" action="#" onsubmit="return false;" method="post">
<table id="table1" style="width : 100%; height : 100%; border : 1px solid #ccc;" frame="void" rules="none">
<tr style="height : 25%; text-align : center;">
<td>Money : <input id="money" name="money" value="4000" maxlength="4" type="text" size="4"> $</td>
<td><input type="button" id="b0" name="c25" class="buttonStyle" value="stam"></td>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><!-- TARGET CELL -->
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr style="height : 25%; text-align : center;">
<td><input type="button" id="b1" name="c25" class="buttonStyle1" onclick="hit( this.form, 25 );" value="stam"></td>
<td><input type="button" id="b2" name="c50" class="buttonStyle2" onclick="hit( this.form, 50 );"></td>
<td><input type="button" id="b3" name="c100" class="buttonStyle3" onclick="hit( this.form, 100 );"></td>
<td><input type="button" value="hold"></td>
<td><input type="button" onclick="reset( this.form );" value="deal again"></td>
</tr>
</table>
</form>
</body>

</html>

hope it helps...

essential 84 Posting Shark

14 Years Ago

Hi,

it's a failsafe procedure that i always use when i am implementing lines inside my code.

Here's a short explanation:

var f = f || null; // If the f parameter has no specified value, then convert it to null (empty value).

var i = i || null; // Same explanation with the f argument.

var h = f.money.value * 1; // Same as  parseInt( f.money.value ), will convert string into a number.

var cards = []; // creating empty array.

var cards[ 0 ] = new Image(); /* Creating new image object, the main use of this is to load the image and having it cached before it needs to be displayed. */

cards[ 0 ].src = "Cards/cl1.jpg"; // Specify the source (path) of the image.;

var ie;
var table = document.getElementById("table1"); // meant for Firefox, Opera, Chrome, Safari, IE7+ etc.

(( !table && ( ie = document.all.table1 )) ? table = ie : ie = 0 ); // if the browser does not understand the getElementById method, then reassigned its value to document.all.table1 which is meant for the older versions of IE browser.

var table = document.getElementById("table1");
var row2cell1 = table.rows[ 1 ].cell( 1 );
row2cell1.appendChild( cards[ 0 ] );

Yes you can simply apply those lines above, but it will not work under IE5- modes.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

severman 0 Junior Poster in Training · Answer 1 · 2009-08-01T18:26:00+00:00

hi
first of all thanks for you help.

can u explain what those lines do?

var f = f || null;
var i = i || null;
var h = f.money.value * 1;
var cards = [];
cards[ 0 ] = new Image();
cards[ 0 ].src = "Cards/cl1.gif";
var ie;
var table = document.getElementById("table1"); // Table-body

   (( !table && ( ie = document.all.table1 )) ? table = ie : ie = 0 );

var row2cell1 = table.rows[ 1 ].cells( 1 ); // Target row in range2 column1
   f.money.value = h - i;
   h = f.money.value;
   if ( row2cell1.innerHTML.indexOf( String( cards[ 0 ].outerHTML )) !== -1 )
   row2.cell1.removeChild( cards[ 0 ] );
   row2cell1.appendChild( cards[ 0 ] );

because i dont understand them.
cant i just replace them with those lines?

var table = document.getElementById("table1"); 
var row2cell1 = table.rows[ 1 ].cells( 1 ); 
 row2cell1.appendChild( cards[ 0 ] );

severman 0 Junior Poster in Training · Answer 2 · 2009-08-02T18:14:42+00:00

first of all, i cant explain you how much you have just helped me!
but if u can just explain me this one line code that you wrote:

if ( row2cell1.innerHTML.indexOf( String( cards[ 0 ].outerHTML )) !== -1 )

because i've seen that with out that line it wont work...
again, thank you very much!!

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-08-02T22:53:26+00:00

if ( row1cell1.innerHTML.indexOf( cards[ 0 ] ) !== -1 ) { // statements...

Hi severeman,

the codition above, will prevent row1cell1 from duplicating (or appending) its content for a new image's, everytime the hit(arg1, arg2) function get executed.

Here's a more simplified line: if ( row1cell1.childNodes.length ) { // more statements but not as reliable as with the above block example.

But if you really intend to multipy the image inside cell1, then simply remove the block stated below:

if ( row1cell1.innerHTML.indexOf( cards[ 0 ] ) !== -1 ) 
row1cell1.removeChild( cards[ 0 ] );

you'll notice that the generated image will be accumulated inside row1cell everytime you will hit any of those button's with a hit() function attached to them.

Hope it does helped...
-essentia

inserting img into table

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers