dynamic table and coloring a cell of it on typing the name of the color in the cell.

"i have created a dynamic table in javascript by entering the no of rows and colums i want. now i have created a button..on typing a color's name in any cell of the table and clicking on the button the cell should get colored with the respective color. how do i do that??"

i have given my code below..you can see it ..i have tried the color part but its not working.

<html>
 <head>     
  <title>Create table dynamically</title>
  
  <style type="text/css">
  body
  {
  	background-image:url("images/lightpink.jpg");
    background-position:"right";
   	background-repeat:no-repeat;
   	background-color:#F598AF;
  }
  
  #table
  {
  	background-color:#ED9AE3;
  	border-color:#C21080;
  }
  
  span.btn1 
    {     
    	background:url("images/lovely.jpg") 0 0 no-repeat;        
    	padding-left:34px;     
    	text-align:center;     
    	font-size:24px;     
    	font-weight:700;     
    	font-family:arial;     
    	line-height:35px;     
    	display:block;     
    	height:40px;     
    	width:220px;  
    }   
    
    span.btn1 a 
    {     
    	background:url("images/lovely.jpg") top right no-repeat;         
    	padding-right:34px;      
    	text-decoration:none;     
    	color:#fff;     
    	display:block;     
    	height:40px; 
    }  
    	
    span.btn1 a:hover 
    {     
    	background:url("images/lovely.jpg") top right no-repeat;         
    	padding-right:34px;      
    	text-decoration:none;     
    	color:#000000;     
    	display:block;     
    	height:45px; 
    } 

  span.btn2 
    {     
    	background:url("images/lovely.jpg") 0 0 no-repeat;        
    	padding-left:34px;     
    	text-align:center;     
    	font-size:24px;     
    	font-weight:700;     
    	font-family:arial;     
    	line-height:35px;     
    	display:block;     
    	height:40px;     
    	width:220px;  
    }   
    
    span.btn2 a 
    {     
    	background:url("images/lovely.jpg") top right no-repeat;         
    	padding-right:34px;      
    	text-decoration:none;     
    	color:#fff;     
    	display:block;     
    	height:40px; 
    }  
    	
    span.btn2 a:hover 
    {     
    	background:url("images/lovely.jpg") top right no-repeat;         
    	padding-right:34px;      
    	text-decoration:none;     
    	color:#000000;     
    	display:block;     
    	height:45px; 
    } 
    
    </style>
    
   <script type="text/javascript" language="javascript">         
     
     
     
     function createTable() 
     {
 
        var table = document.getElementById('tby');
 
        var rowCount = parseInt(document.getElementById('txtRow').value);
        var colCount = parseInt(document.getElementById('txtCol').value);
 
  
        for (var i = 0; i < rowCount; i++) 
        {
           
            var Cell = document.createElement('tr');
            table.appendChild(Cell);
           
                
                for (j = 0; j < colCount; j++) 
                {
                    var row = document.createElement('td');
                    if (j == 0) 
                    {
                        var chk = document.createElement('input');
                        chk.type = 'checkbox';
                        row.appendChild(chk);
 
                        
                    }
                    else {
                        //var row = document.createElement('td');
                        var txt = document.createElement('input');
                        txt.type = 'text';
                        row.appendChild(txt);
 
                    }
                    Cell.appendChild(row);
 
                }
           
 
 
 
        }
 
    }

     
  function deleteRow(tableID) 
  {             
    try 
        {             
            var table = document.getElementById(tableID);             
            var rowCount = table.rows.length;               
            for(var i=0; i<rowCount; i++) 
            {                
            var row = table.rows[i];                 
            var chkbox = row.cells[0].childNodes[0];                 
                if(null != chkbox && true == chkbox.checked) 
                {                     
                    table.deleteRow(i);                     
                    rowCount--;                     
                    i--;  
                                  
                }               
            
            }             
       
        }
   catch(e) 
   {                 
       alert(e); 
            
   }         
 } 
  
 
 function Checked()
 {
   
     
     var tablerowlen=document.getElementById('Table');
    
     var rowlength=tablerowlen.children[0].children.length;
     var collength=tablerowlen.children[0].children[0].children.length;
     
   
     for (var i = 0; i < rowlength; i++) 
     {
       
       for (var j = 1; j < collength; j++) 
       {
         if(tablerowlen.children[0].children[i].children[j].children[0].value !="")
         {
            tablerowlen.children[0].children[i].children[0].children[0].checked=true;
            break;
         }
          if(tablerowlen.children[0].children[i].children[j].children[0].value=="color_name")
          {
            tablerowlen.children[0].children[i].children[0].children[0].style.backgroundColor=color;
         } 
       }
     } 
     
 }
 
 
 
 
 </script>     
        
    
   </head> 
     <body>       
       
       <b><i>Rows:</i></b> <input type="text" id="txtRow" style="text-align:"left" /><br />
       <b><i>Cols:</i></b><input type="text" id="txtCol" style="text-align:"left" />
 
       <span class="btn1"><a href="#" onclick="createTable('Table')">Create Table</a></span><br /> 
       <span class="btn2"><a href="#" onclick="deleteRow('Table')">Delete Row</a></span><br />
       
       <table id="Table" width="100px" border="10"> 
       <tbody id='tby'>
       </tbody>
       </table> 
       <input type="button" name="btn" value="btn3" onclick="Checked()" />
     </body> 
 </html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:

Select all Open in new window

Replies

by: mplungjan

Posted on 2012-01-23 at 10:56:16ID: 37481700

All comments and solutions are available to Premium Service Members only. Sign up to view the solution to this question. Already a member? Log in to view this solution.

Question

dynamic table and coloring a cell of it on typing the name of the color in the cell.

Related Solutions

Replies

Log In

Top Experts