Javascript, setAttribute?????

  • Liamw411
  • Novice
  • Novice
  • Liamw411
  • Posts: 19
  • Loc: United Kingdom

Post 3+ Months Ago

Hi i am creating a javascript code which will create dynamic tables and contents, i am trying to use setAttribute to set an id using a counter variable without any luck. Although i can get this to work without the variables.

Any help would be greatly apprechiated.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Can you post the code your having issues with?
  • Liamw411
  • Novice
  • Novice
  • Liamw411
  • Posts: 19
  • Loc: United Kingdom

Post 3+ Months Ago

Ok so i have been playing abit and i have managed to kind of sort the issue. I am now able to target and apply css but it seems to be targeting an entire column instead of a single cell.

Code: [ Select ]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" >
<html>
<head>
<title>create DOM table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#test0{
background:yellow;
height:100px;
}
#newtable{
border:2px solid #999;
font-family:verdana,arial,helvetica,sans-serif;
font-size:18px;
margin:auto;
}
#newtable td{
width:50px;
line-height:50px;
border:1px solid #000;
text-align:center;
}
</style>

<script type="text/javascript">

window.onload=function() {
makeTable();
}

function makeTable() {

row=new Array();
cell=new Array();

row_num=10; //edit this value to suit
cell_num=10; //edit this value to suit

tab=document.createElement('table');
tab.setAttribute('id','newtable');

tbo=document.createElement('tbody');

for(c=0;c<row_num;c++){
row[c]=document.createElement('tr');

for(k=0;k<cell_num;k++) {
cell[k]=document.createElement('td');
cell[k].id="test"+k;
cont=document.createTextNode('blah')
cell[k].appendChild(cont);

row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
}
</script>

</head>
<body>

<div id="mytable"></div>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" >
  2. <html>
  3. <head>
  4. <title>create DOM table</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  7. #test0{
  8. background:yellow;
  9. height:100px;
  10. }
  11. #newtable{
  12. border:2px solid #999;
  13. font-family:verdana,arial,helvetica,sans-serif;
  14. font-size:18px;
  15. margin:auto;
  16. }
  17. #newtable td{
  18. width:50px;
  19. line-height:50px;
  20. border:1px solid #000;
  21. text-align:center;
  22. }
  23. </style>
  24. <script type="text/javascript">
  25. window.onload=function() {
  26. makeTable();
  27. }
  28. function makeTable() {
  29. row=new Array();
  30. cell=new Array();
  31. row_num=10; //edit this value to suit
  32. cell_num=10; //edit this value to suit
  33. tab=document.createElement('table');
  34. tab.setAttribute('id','newtable');
  35. tbo=document.createElement('tbody');
  36. for(c=0;c<row_num;c++){
  37. row[c]=document.createElement('tr');
  38. for(k=0;k<cell_num;k++) {
  39. cell[k]=document.createElement('td');
  40. cell[k].id="test"+k;
  41. cont=document.createTextNode('blah')
  42. cell[k].appendChild(cont);
  43. row[c].appendChild(cell[k]);
  44. }
  45. tbo.appendChild(row[c]);
  46. }
  47. tab.appendChild(tbo);
  48. document.getElementById('mytable').appendChild(tab);
  49. }
  50. </script>
  51. </head>
  52. <body>
  53. <div id="mytable"></div>
  54. </body>
  55. </html>


Thanks for taking the time to help me.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

OK I see your issue the cell ids are as follows
test0
test1
test2
test3
test4
test5
test6
test7
test8
test9

then the next row is

test0
test1
test2
test3
test4
test5
test6
test7
test8
test9

Actual output
HTML Code: [ Select ]
<table id="newtable">
        <tbody>
            <tr>
                <td id="test0">blah</td>
                <td id="test1">blah</td>
                <td id="test2">blah</td>
                <td id="test3">blah</td>
                <td id="test4">blah</td>
                <td id="test5">blah</td>
                <td id="test6">blah</td>
                <td id="test7">blah</td>
                <td id="test8">blah</td>
                <td id="test9">blah</td>
            </tr>
            <tr>
                <td id="test0">blah</td>
                <td id="test1">blah</td>
                <td id="test2">blah</td>
                <td id="test3">blah</td>
                <td id="test4">blah</td>
                <td id="test5">blah</td>
                <td id="test6">blah</td>
                <td id="test7">blah</td>
                <td id="test8">blah</td>
                <td id="test9">blah</td>
            </tr>
            <tr>
                <td id="test0">blah</td>
                <td id="test1">blah</td>
                <td id="test2">blah</td>
                <td id="test3">blah</td>
                <td id="test4">blah</td>
                <td id="test5">blah</td>
                <td id="test6">blah</td>
                <td id="test7">blah</td>
                <td id="test8">blah</td>
                <td id="test9">blah</td>
            </tr>
            <tr>
                <td id="test0">blah</td>
                <td id="test1">blah</td>
                <td id="test2">blah</td>
                <td id="test3">blah</td>
                <td id="test4">blah</td>
                <td id="test5">blah</td>
                <td id="test6">blah</td>
                <td id="test7">blah</td>
                <td id="test8">blah</td>
                <td id="test9">blah</td>
            </tr>
            <tr>
                <td id="test0">blah</td>
                <td id="test1">blah</td>
                <td id="test2">blah</td>
                <td id="test3">blah</td>
                <td id="test4">blah</td>
                <td id="test5">blah</td>
                <td id="test6">blah</td>
                <td id="test7">blah</td>
                <td id="test8">blah</td>
                <td id="test9">blah</td>
            </tr>
            <tr>
                <td id="test0">blah</td>
                <td id="test1">blah</td>
                <td id="test2">blah</td>
                <td id="test3">blah</td>
                <td id="test4">blah</td>
                <td id="test5">blah</td>
                <td id="test6">blah</td>
                <td id="test7">blah</td>
                <td id="test8">blah</td>
                <td id="test9">blah</td>
            </tr>
            <tr>
                <td id="test0">blah</td>
                <td id="test1">blah</td>
                <td id="test2">blah</td>
                <td id="test3">blah</td>
                <td id="test4">blah</td>
                <td id="test5">blah</td>
                <td id="test6">blah</td>
                <td id="test7">blah</td>
                <td id="test8">blah</td>
                <td id="test9">blah</td>
            </tr>
            <tr>
                <td id="test0">blah</td>
                <td id="test1">blah</td>
                <td id="test2">blah</td>
                <td id="test3">blah</td>
                <td id="test4">blah</td>
                <td id="test5">blah</td>
                <td id="test6">blah</td>
                <td id="test7">blah</td>
                <td id="test8">blah</td>
                <td id="test9">blah</td>
            </tr>
            <tr>
                <td id="test0">blah</td>
                <td id="test1">blah</td>
                <td id="test2">blah</td>
                <td id="test3">blah</td>
                <td id="test4">blah</td>
                <td id="test5">blah</td>
                <td id="test6">blah</td>
                <td id="test7">blah</td>
                <td id="test8">blah</td>
                <td id="test9">blah</td>
            </tr>
            <tr>
                <td id="test0">blah</td>
                <td id="test1">blah</td>
                <td id="test2">blah</td>
                <td id="test3">blah</td>
                <td id="test4">blah</td>
                <td id="test5">blah</td>
                <td id="test6">blah</td>
                <td id="test7">blah</td>
                <td id="test8">blah</td>
                <td id="test9">blah</td>
            </tr>
        </tbody>
    </table>
 
  1. <table id="newtable">
  2.         <tbody>
  3.             <tr>
  4.                 <td id="test0">blah</td>
  5.                 <td id="test1">blah</td>
  6.                 <td id="test2">blah</td>
  7.                 <td id="test3">blah</td>
  8.                 <td id="test4">blah</td>
  9.                 <td id="test5">blah</td>
  10.                 <td id="test6">blah</td>
  11.                 <td id="test7">blah</td>
  12.                 <td id="test8">blah</td>
  13.                 <td id="test9">blah</td>
  14.             </tr>
  15.             <tr>
  16.                 <td id="test0">blah</td>
  17.                 <td id="test1">blah</td>
  18.                 <td id="test2">blah</td>
  19.                 <td id="test3">blah</td>
  20.                 <td id="test4">blah</td>
  21.                 <td id="test5">blah</td>
  22.                 <td id="test6">blah</td>
  23.                 <td id="test7">blah</td>
  24.                 <td id="test8">blah</td>
  25.                 <td id="test9">blah</td>
  26.             </tr>
  27.             <tr>
  28.                 <td id="test0">blah</td>
  29.                 <td id="test1">blah</td>
  30.                 <td id="test2">blah</td>
  31.                 <td id="test3">blah</td>
  32.                 <td id="test4">blah</td>
  33.                 <td id="test5">blah</td>
  34.                 <td id="test6">blah</td>
  35.                 <td id="test7">blah</td>
  36.                 <td id="test8">blah</td>
  37.                 <td id="test9">blah</td>
  38.             </tr>
  39.             <tr>
  40.                 <td id="test0">blah</td>
  41.                 <td id="test1">blah</td>
  42.                 <td id="test2">blah</td>
  43.                 <td id="test3">blah</td>
  44.                 <td id="test4">blah</td>
  45.                 <td id="test5">blah</td>
  46.                 <td id="test6">blah</td>
  47.                 <td id="test7">blah</td>
  48.                 <td id="test8">blah</td>
  49.                 <td id="test9">blah</td>
  50.             </tr>
  51.             <tr>
  52.                 <td id="test0">blah</td>
  53.                 <td id="test1">blah</td>
  54.                 <td id="test2">blah</td>
  55.                 <td id="test3">blah</td>
  56.                 <td id="test4">blah</td>
  57.                 <td id="test5">blah</td>
  58.                 <td id="test6">blah</td>
  59.                 <td id="test7">blah</td>
  60.                 <td id="test8">blah</td>
  61.                 <td id="test9">blah</td>
  62.             </tr>
  63.             <tr>
  64.                 <td id="test0">blah</td>
  65.                 <td id="test1">blah</td>
  66.                 <td id="test2">blah</td>
  67.                 <td id="test3">blah</td>
  68.                 <td id="test4">blah</td>
  69.                 <td id="test5">blah</td>
  70.                 <td id="test6">blah</td>
  71.                 <td id="test7">blah</td>
  72.                 <td id="test8">blah</td>
  73.                 <td id="test9">blah</td>
  74.             </tr>
  75.             <tr>
  76.                 <td id="test0">blah</td>
  77.                 <td id="test1">blah</td>
  78.                 <td id="test2">blah</td>
  79.                 <td id="test3">blah</td>
  80.                 <td id="test4">blah</td>
  81.                 <td id="test5">blah</td>
  82.                 <td id="test6">blah</td>
  83.                 <td id="test7">blah</td>
  84.                 <td id="test8">blah</td>
  85.                 <td id="test9">blah</td>
  86.             </tr>
  87.             <tr>
  88.                 <td id="test0">blah</td>
  89.                 <td id="test1">blah</td>
  90.                 <td id="test2">blah</td>
  91.                 <td id="test3">blah</td>
  92.                 <td id="test4">blah</td>
  93.                 <td id="test5">blah</td>
  94.                 <td id="test6">blah</td>
  95.                 <td id="test7">blah</td>
  96.                 <td id="test8">blah</td>
  97.                 <td id="test9">blah</td>
  98.             </tr>
  99.             <tr>
  100.                 <td id="test0">blah</td>
  101.                 <td id="test1">blah</td>
  102.                 <td id="test2">blah</td>
  103.                 <td id="test3">blah</td>
  104.                 <td id="test4">blah</td>
  105.                 <td id="test5">blah</td>
  106.                 <td id="test6">blah</td>
  107.                 <td id="test7">blah</td>
  108.                 <td id="test8">blah</td>
  109.                 <td id="test9">blah</td>
  110.             </tr>
  111.             <tr>
  112.                 <td id="test0">blah</td>
  113.                 <td id="test1">blah</td>
  114.                 <td id="test2">blah</td>
  115.                 <td id="test3">blah</td>
  116.                 <td id="test4">blah</td>
  117.                 <td id="test5">blah</td>
  118.                 <td id="test6">blah</td>
  119.                 <td id="test7">blah</td>
  120.                 <td id="test8">blah</td>
  121.                 <td id="test9">blah</td>
  122.             </tr>
  123.         </tbody>
  124.     </table>
  125.  


Solution make a variable to do the counting instead of relying on the variable k

HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" >
<html>
<head>
<title>create DOM table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 
#test0{
   background:yellow;
   height:100px;
}
 
#newtable{
   border:2px solid #999;
   font-family:verdana,arial,helvetica,sans-serif;
   font-size:18px;
   margin:auto;
}
 
#newtable td{
   width:50px;
   line-height:50px;
   border:1px solid #000;
   text-align:center;
}
 
</style>
 
<script type="text/javascript">
 
window.onload=function() {
   
   makeTable();
 
}
 
function makeTable() {
   
   row=new Array();
   cell=new Array();
   row_num=10; //edit this value to suit
   cell_num=10; //edit this value to suit
   tab=document.createElement('table');
   tab.setAttribute('id','newtable');
   tbo=document.createElement('tbody');
   
   // Make a counter varible
   var counter = 0;
   
   for(c=0;c<row_num;c++){
     
      row[c]=document.createElement('tr');
     
      for(k=0;k<cell_num;k++) {
         
         cell[k]=document.createElement('td');
         
         // Use the counter instead of the varible k
         cell[k].id="test" + counter;
         
         cont=document.createTextNode('blah')
         cell[k].appendChild(cont);
         row[c].appendChild(cell[k]);
         
         // Add to the counter
         counter++
         
      }
   
      tbo.appendChild(row[c]);
   
   }
   
   tab.appendChild(tbo);
   document.getElementById('mytable').appendChild(tab);
 
}
</script>
</head>
<body>
<div id="mytable"></div>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" >
  2. <html>
  3. <head>
  4. <title>create DOM table</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  7.  
  8. #test0{
  9.    background:yellow;
  10.    height:100px;
  11. }
  12.  
  13. #newtable{
  14.    border:2px solid #999;
  15.    font-family:verdana,arial,helvetica,sans-serif;
  16.    font-size:18px;
  17.    margin:auto;
  18. }
  19.  
  20. #newtable td{
  21.    width:50px;
  22.    line-height:50px;
  23.    border:1px solid #000;
  24.    text-align:center;
  25. }
  26.  
  27. </style>
  28.  
  29. <script type="text/javascript">
  30.  
  31. window.onload=function() {
  32.    
  33.    makeTable();
  34.  
  35. }
  36.  
  37. function makeTable() {
  38.    
  39.    row=new Array();
  40.    cell=new Array();
  41.    row_num=10; //edit this value to suit
  42.    cell_num=10; //edit this value to suit
  43.    tab=document.createElement('table');
  44.    tab.setAttribute('id','newtable');
  45.    tbo=document.createElement('tbody');
  46.    
  47.    // Make a counter varible
  48.    var counter = 0;
  49.    
  50.    for(c=0;c<row_num;c++){
  51.      
  52.       row[c]=document.createElement('tr');
  53.      
  54.       for(k=0;k<cell_num;k++) {
  55.          
  56.          cell[k]=document.createElement('td');
  57.          
  58.          // Use the counter instead of the varible k
  59.          cell[k].id="test" + counter;
  60.          
  61.          cont=document.createTextNode('blah')
  62.          cell[k].appendChild(cont);
  63.          row[c].appendChild(cell[k]);
  64.          
  65.          // Add to the counter
  66.          counter++
  67.          
  68.       }
  69.    
  70.       tbo.appendChild(row[c]);
  71.    
  72.    }
  73.    
  74.    tab.appendChild(tbo);
  75.    document.getElementById('mytable').appendChild(tab);
  76.  
  77. }
  78. </script>
  79. </head>
  80. <body>
  81. <div id="mytable"></div>
  82. </body>
  83. </html>
  84.  
  • Liamw411
  • Novice
  • Novice
  • Liamw411
  • Posts: 19
  • Loc: United Kingdom

Post 3+ Months Ago

Thank you very much this has resolved the issue i was having.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Your welcome

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: Liamw411 and 72 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.