Member Avatar for marjan_m

Hi,

I need to get a table in javascript n i wrote this code:

//mainMenu is the table name
var x = document.getElementById("mainMenu")
//then i need to get it's left margin so i wrote

var x = document.getElementById("mainMenu").style.marginLeft;

But it is giving error that x is null. Can any one please correct it?

Thanks for your time
Regards

  • 5 Contributors
  • 7 Replies
  • 148 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by marjan_m

Recommended Answers

All 7 Replies

Member Avatar for javaAddict

The "mainMenu" should be the id of the table.
Since you are using this: document.getElementById("mainMenu") It is quite obvious when you say "getElementById" that the argument should be the id of the element you are trying to take.

Member Avatar for marjan_m

Thanks for your reply.

I have defined the table id "mainMenu", so thats why using here. Can you please further guide?

Member Avatar for peter_budo

Post move to JavaScript, dunno why it was posted in JSP (Java Server Pages) section...

Member Avatar for javaAddict

I usually use javascript to manipulate the state and value of the input fields. Haven't combined it with tables.
But I would suggest to post the code you have for the table as well as the javascript code and describe what you are trying to accomplish. If I know it I will reply

Member Avatar for ~s.o.s~

> But it is giving error that x is null. Can any one please correct it?

Because the `style' property is only set when inline style sheets are used. To get the style details of the element whose style is set using linked or embedded style sheets, you need to put in a bit of effort. Read this.

Member Avatar for mschroeder

Try this example out. This uses jQuery to grab the css properties you want. Even on elements that do not have inline styles.

This is what matters, it serves the jquery library from googles cdn, but this could be from a local copy too. jQuery CSS Documentation
Sends two alerts to the browser the first with the padding-left value and the second with the margin-left value.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   alert( $("#someTable").css('padding-left') );
   alert( $("#someTable").css('margin-left') );
 });
</script>

This is the full example, but i gave my table and id of "someTable"
You could use whatever you wanted.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   alert( $("#someTable").css('padding-left') );
   alert( $("#someTable").css('margin-left') );
 });
</script>
<style>
table {
	padding-left: 10px;
	margin-left: 50px;
}
</style>
</head>

<body>
<table width="200" border="0" cellpadding="2" id="someTable" >
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
Member Avatar for marjan_m

Thanks to all of you for helping me.

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.