f



Creating table on the fly -> created, however, how to apply TR / TD width and height?

Here's the code and I attempted to apply some CSS code for TR and TD but largely ineffective, what's wrong?  

Thanks.

	/* 	author: me...
	function: insert HTML table to the end of the body
	date: 10/25/2016
	(1) default: 4 columns and 10 rows
	*/
	
var KN = {};
		
	KN.insertTBL = function() {
	
		// error handling, 10/20/2016	
				
		// first, create table
		tbl = document.createElement('table');				
			// creates a table row 
				newrow = [];
				newrow[0] = document.createElement("tr"); 
				 //	newrow.id = 'row'+cnt; 
				 // create 4 td(s)
				 /* one method
				 cell = [];
				 cell[0] = document.createElement("td");   
				 cell[1] = document.createElement("td");
				 cell[2] = document.createElement("td");
				 cell[3] = document.createElement("td");	
				 */
				 // insert 4 TD(s) to tr[0]
				 // it would be elegant to use one line statement to do so but...
				 for (c = 0; c < 4; c++) {
					newrow[0].insertCell(c);
					// debug
					console.log(newrow[0]);
				 }
				
				// add to tbl
				tbl.appendChild(newrow[0]);
				
		 // create 9 more tr(s)
		 for (r = 1; r < 10; r++) {
			newrow[r] = newrow[0].cloneNode(true);
			// add to tbl
			tbl.appendChild(newrow[r]);
			}
		
		// apply style
		tbl.setAttribute('style','background-color:lightblue; tr {height: 25px; width: 120px}; td {height: 25px; width: 30px};');
		// tbl.setAttribute('style','width: 90%; height:60%;')
		// tbl.setAttribute('style','border: 1px solid grey');
		// tbl.setAttribute('style','tr {height: 25px; width: 120px;}');
		
		// add table to body
		document.body.append(tbl);
}
	
	
0
justaguy
10/26/2016 12:34:56 AM
comp.lang.javascript 38370 articles. 2 followers. javascript4 (1315) is leader. Post Follow

9 Replies
511 Views

Similar Articles

[PageSpeed] 50

On Tuesday, October 25, 2016 at 8:35:19 PM UTC-4, justaguy wrote:
> Here's the code and I attempted to apply some CSS code for TR and TD but largely ineffective, what's wrong?  
> 
> Thanks.
> 
> 	/* 	author: me...
> 	function: insert HTML table to the end of the body
> 	date: 10/25/2016
> 	(1) default: 4 columns and 10 rows
> 	*/
> 	
> var KN = {};
> 		
> 	KN.insertTBL = function() {
> 	
> 		// error handling, 10/20/2016	
> 				
> 		// first, create table
> 		tbl = document.createElement('table');				
> 			// creates a table row 
> 				newrow = [];
> 				newrow[0] = document.createElement("tr"); 
> 				 //	newrow.id = 'row'+cnt; 
> 				 // create 4 td(s)
> 				 /* one method
> 				 cell = [];
> 				 cell[0] = document.createElement("td");   
> 				 cell[1] = document.createElement("td");
> 				 cell[2] = document.createElement("td");
> 				 cell[3] = document.createElement("td");	
> 				 */
> 				 // insert 4 TD(s) to tr[0]
> 				 // it would be elegant to use one line statement to do so but...
> 				 for (c = 0; c < 4; c++) {
> 					newrow[0].insertCell(c);
> 					// debug
> 					console.log(newrow[0]);
> 				 }
> 				
> 				// add to tbl
> 				tbl.appendChild(newrow[0]);
> 				
> 		 // create 9 more tr(s)
> 		 for (r = 1; r < 10; r++) {
> 			newrow[r] = newrow[0].cloneNode(true);
> 			// add to tbl
> 			tbl.appendChild(newrow[r]);
> 			}
> 		
> 		// apply style
> 		tbl.setAttribute('style','background-color:lightblue; tr {height: 25px; width: 120px}; td {height: 25px; width: 30px};');
> 		// tbl.setAttribute('style','width: 90%; height:60%;')
> 		// tbl.setAttribute('style','border: 1px solid grey');
> 		// tbl.setAttribute('style','tr {height: 25px; width: 120px;}');
> 		
> 		// add table to body
> 		document.body.append(tbl);
> }

silly me, forgot the INPUT field for each cell... following is the new code:

	var KN = {};
		
	KN.insertTBL = function() {
	
		// error handling, 10/20/2016	
				
		// first, create table
		tbl = document.createElement('table');				
			// creates a table row 
				newrow = [];
				newrow[0] = document.createElement("tr"); 
				 //	newrow.id = 'row'+cnt; 
				 // create 4 td(s)
				 /* one method
				 cell = [];
				 cell[0] = document.createElement("td");   
				 cell[1] = document.createElement("td");
				 cell[2] = document.createElement("td");
				 cell[3] = document.createElement("td");	
				 */
				 // insert 4 TD(s) to tr[0]
				 // it would be elegant to use one line statement to do so but...
				 for (c = 0; c < 4; c++) {
					cell = newrow[0].insertCell(c);
					cellInput = document.createElement("input"); 
					cellInput.width = "20%";
					cell.appendChild(cellInput);
					// debug
					console.log(newrow[0]);
				 }
				
				// add to tbl
				tbl.appendChild(newrow[0]);
				
		 // create 9 more tr(s)
		 for (r = 1; r < 10; r++) {
			newrow[r] = newrow[0].cloneNode(true);
			// add to tbl
			tbl.appendChild(newrow[r]);
			}
		
		// apply style
		tbl.setAttribute('style','width:90%; height:70%; cellpadding:1px; cellspacing:1px;');
		// tbl.setAttribute('style','width: 90%; height:60%;')
		// tbl.setAttribute('style','border: 1px solid grey');
		// tbl.setAttribute('style','tr {height: 25px; width: 120px;}');
				
		// add table to body
		document.body.append(tbl);
}
	

One issue:
the INPUT width, which I set as
cell.width = "20%";
corresponding to the CSS of 
td {
   height: 25px;
   width: 20%;
 }

however, the INPUT width looks substantially smaller, how come?

Thanks.

0
justaguy
10/26/2016 2:04:24 AM
On Tuesday, October 25, 2016 at 8:35:19 PM UTC-4, justaguy wrote:
> Here's the code and I attempted to apply some CSS code for TR and TD but largely ineffective, what's wrong?  
> 
> Thanks.
> 
> 	/* 	author: me...
> 	function: insert HTML table to the end of the body
> 	date: 10/25/2016
> 	(1) default: 4 columns and 10 rows
> 	*/
> 	
> var KN = {};
> 		
> 	KN.insertTBL = function() {
> 	
> 		// error handling, 10/20/2016	
> 				
> 		// first, create table
> 		tbl = document.createElement('table');				
> 			// creates a table row 
> 				newrow = [];
> 				newrow[0] = document.createElement("tr"); 
> 				 //	newrow.id = 'row'+cnt; 
> 				 // create 4 td(s)
> 				 /* one method
> 				 cell = [];
> 				 cell[0] = document.createElement("td");   
> 				 cell[1] = document.createElement("td");
> 				 cell[2] = document.createElement("td");
> 				 cell[3] = document.createElement("td");	
> 				 */
> 				 // insert 4 TD(s) to tr[0]
> 				 // it would be elegant to use one line statement to do so but...
> 				 for (c = 0; c < 4; c++) {
> 					newrow[0].insertCell(c);
> 					// debug
> 					console.log(newrow[0]);
> 				 }
> 				
> 				// add to tbl
> 				tbl.appendChild(newrow[0]);
> 				
> 		 // create 9 more tr(s)
> 		 for (r = 1; r < 10; r++) {
> 			newrow[r] = newrow[0].cloneNode(true);
> 			// add to tbl
> 			tbl.appendChild(newrow[r]);
> 			}
> 		
> 		// apply style
> 		tbl.setAttribute('style','background-color:lightblue; tr {height: 25px; width: 120px}; td {height: 25px; width: 30px};');
> 		// tbl.setAttribute('style','width: 90%; height:60%;')
> 		// tbl.setAttribute('style','border: 1px solid grey');
> 		// tbl.setAttribute('style','tr {height: 25px; width: 120px;}');
> 		
> 		// add table to body
> 		document.body.append(tbl);
> }

And here's the new code, almost there except CELL and INPUT not totally in sync yet.

	
	var KN = {};
		
	KN.insertTBL = function() {
	
		// error handling, 10/20/2016	
				
		// first, create table
		tbl = document.createElement('table');				
			// creates a table row 
				newrow = [];
				newrow[0] = document.createElement("tr"); 
				 //	newrow.id = 'row'+cnt; 
				 // create 4 td(s)
				 /* one method
				 cell = [];
				 cell[0] = document.createElement("td");   
				 cell[1] = document.createElement("td");
				 cell[2] = document.createElement("td");
				 cell[3] = document.createElement("td");	
				 */
				 // insert 4 TD(s) to tr[0]
				 // it would be elegant to use one line statement to do so but...
				 for (c = 0; c < 4; c++) {
					cell = newrow[0].insertCell(c);
					cellInput = document.createElement("input"); 
					// p = document.createElement("input").parentNode;
					cellInput.style.width = "100%";
					cell.appendChild(cellInput);
					// debug
					console.log(newrow[0]);
				 }
				
				// add to tbl
				tbl.appendChild(newrow[0]);
				
		 // create 9 more tr(s)
		 for (r = 1; r < 10; r++) {
			newrow[r] = newrow[0].cloneNode(true);
			// add to tbl
			tbl.appendChild(newrow[r]);
			}
		
		// apply style
		tbl.setAttribute('style','width:90%; height:70%;'); // cellpadding:0px; cellspacing:0px;');
		// tbl.setAttribute('style','width: 90%; height:60%;')
		// tbl.setAttribute('style','border: 1px solid grey');
		// tbl.setAttribute('style','tr {height: 25px; width: 120px;}');
				
		// add table to body
		document.body.append(tbl);
}
	

Thanks.
0
justaguy
10/26/2016 2:19:20 AM
top post for update.  Never mind, the CELL and INPUT alignment issue has just been solved.  Thanks for your time.


On Tuesday, October 25, 2016 at 8:35:19 PM UTC-4, justaguy wrote:
> Here's the code and I attempted to apply some CSS code for TR and TD but largely ineffective, what's wrong?  
> 
> Thanks.
> 
> 	/* 	author: me...
> 	function: insert HTML table to the end of the body
> 	date: 10/25/2016
> 	(1) default: 4 columns and 10 rows
> 	*/
> 	
> var KN = {};
> 		
> 	KN.insertTBL = function() {
> 	
> 		// error handling, 10/20/2016	
> 				
> 		// first, create table
> 		tbl = document.createElement('table');				
> 			// creates a table row 
> 				newrow = [];
> 				newrow[0] = document.createElement("tr"); 
> 				 //	newrow.id = 'row'+cnt; 
> 				 // create 4 td(s)
> 				 /* one method
> 				 cell = [];
> 				 cell[0] = document.createElement("td");   
> 				 cell[1] = document.createElement("td");
> 				 cell[2] = document.createElement("td");
> 				 cell[3] = document.createElement("td");	
> 				 */
> 				 // insert 4 TD(s) to tr[0]
> 				 // it would be elegant to use one line statement to do so but...
> 				 for (c = 0; c < 4; c++) {
> 					newrow[0].insertCell(c);
> 					// debug
> 					console.log(newrow[0]);
> 				 }
> 				
> 				// add to tbl
> 				tbl.appendChild(newrow[0]);
> 				
> 		 // create 9 more tr(s)
> 		 for (r = 1; r < 10; r++) {
> 			newrow[r] = newrow[0].cloneNode(true);
> 			// add to tbl
> 			tbl.appendChild(newrow[r]);
> 			}
> 		
> 		// apply style
> 		tbl.setAttribute('style','background-color:lightblue; tr {height: 25px; width: 120px}; td {height: 25px; width: 30px};');
> 		// tbl.setAttribute('style','width: 90%; height:60%;')
> 		// tbl.setAttribute('style','border: 1px solid grey');
> 		// tbl.setAttribute('style','tr {height: 25px; width: 120px;}');
> 		
> 		// add table to body
> 		document.body.append(tbl);
> }

0
justaguy
10/26/2016 2:22:20 AM
On Tue, 25 Oct 2016 17:34:56 -0700 (PDT), justaguy
<lichunshen84@gmail.com> wrote:

  <snip>
>				 // insert 4 TD(s) to tr[0]
>				 // it would be elegant to use one line statement to do so but...
>				 for (c =3D 0; c < 4; c++) {
>					newrow[0].insertCell(c);
>					// debug
>					console.log(newrow[0]);
>				 }

It is obvious that this statement does exactly what you say it will do
(assuming insertCell does the right thing). If it lacks elegance then
it's only by a tiny, tiny amount.


  <snip>
>			// add to tbl
>			tbl.appendChild(newrow[r]);
  <snip>

If a reader doesn't understand what this code is doing then that
reader needs a lecture, not a three word comment.

The trouble with redundant comments is that they clutter up the
source, might not be updated when the code is updated, and even worse,
might be confusing, as here (add what?).

  John
0
John
10/26/2016 3:46:17 PM
On Wednesday, October 26, 2016 at 11:46:24 AM UTC-4, John Harris wrote:
> On Tue, 25 Oct 2016 17:34:56 -0700 (PDT), justaguy
>  wrote:
> 
>   <snip>
> >				 // insert 4 TD(s) to tr[0]
> >				 // it would be elegant to use one line statement to do so but...
> >				 for (c = 0; c < 4; c++) {
> >					newrow[0].insertCell(c);
> >					// debug
> >					console.log(newrow[0]);
> >				 }
> 
> It is obvious that this statement does exactly what you say it will do
> (assuming insertCell does the right thing). If it lacks elegance then
> it's only by a tiny, tiny amount.
> 
> 
>   <snip>
> >			// add to tbl
> >			tbl.appendChild(newrow[r]);
>   <snip>
> 
> If a reader doesn't understand what this code is doing then that
> reader needs a lecture, not a three word comment.
> 
> The trouble with redundant comments is that they clutter up the
> source, might not be updated when the code is updated, and even worse,
> might be confusing, as here (add what?).
> 
>   John

oh, ok, thanks.  Btw, here's its current state.  Extra comments not removed yet... will take care of them later...
Next goal, add [Add column / remove column] function

http://54.80.71.115/demo/JS_tbl.html


0
justaguy
10/27/2016 1:07:29 AM
On 27/10/2016 04:07, justaguy wrote:

> ...  Btw, here's its current state.  Extra comments not removed yet... will take care of them later...
> Next goal, add [Add column / remove column] function
>
> http://54.80.71.115/demo/JS_tbl.html

I'd start with the '//comments' in the styles, as CSS does not have 
end-of-line comments:

https://jigsaw.w3.org/css-validator/validator?uri=http%3A//54.80.71.115/demo/JS_tbl.html

You should also check the generated styles, as the script is producing 
erroneous properties (cellpadding, cellspacing).

The markup could use validation also:

https://validator.w3.org/nu/?doc=http%3A%2F%2F54.80.71.115%2Fdemo%2FJS_tbl.html

-- 
Best wishes, Osmo
0
Osmo
10/27/2016 3:47:30 AM
On 10/26/2016 02:34 AM, justaguy wrote:

>
> 		tbl.setAttribute('style','background-color:lightblue; tr {height: 25px; width: 120px}; td {height: 25px; width: 30px};');
> 		// tbl.setAttribute('style','width: 90%; height:60%;')
> 		// tbl.setAttribute('style','border: 1px solid grey');
> 		// tbl.setAttribute('style','tr {height: 25px; width: 120px;}');
> 		

Inline styles do not work this way, they are not locally interpreted 
style sheets. Inline styles (the "style" attribute) can only specify 
styles on the element itself and there is no support for selectors, 
pseudo-classes etc. So if you want to set a height on a tabe row you 
must either add the appropriate style to each row you insert or use a 
CSS style sheet and give the table or row something you can select it 
with. A simple class on the table would suffice here.

0
Silvio
10/27/2016 2:32:55 PM
On Thursday, October 27, 2016 at 10:33:00 AM UTC-4, Silvio wrote:
> On 10/26/2016 02:34 AM, justaguy wrote:
> 
> >
> > 		tbl.setAttribute('style','background-color:lightblue; tr {height: 25px; width: 120px}; td {height: 25px; width: 30px};');
> > 		// tbl.setAttribute('style','width: 90%; height:60%;')
> > 		// tbl.setAttribute('style','border: 1px solid grey');
> > 		// tbl.setAttribute('style','tr {height: 25px; width: 120px;}');
> > 		
> 
> Inline styles do not work this way, they are not locally interpreted 
> style sheets. Inline styles (the "style" attribute) can only specify 
> styles on the element itself and there is no support for selectors, 
> pseudo-classes etc. So if you want to set a height on a tabe row you 
> must either add the appropriate style to each row you insert or use a 
> CSS style sheet and give the table or row something you can select it 
> with. A simple class on the table would suffice here.

Thank you.
0
justaguy
10/28/2016 5:24:51 PM
Hi,

This is top post because of new dev or update.  Please use this URL for the current development,
http://54.80.71.115/demo/JS_tbl.html 

We have two key problems.
When new rows are added.  myTBL.rows.length does not seem to reflect it.
When new column (cell) are added, myTBL.rows.cells.length does not seem to reflect it.
Hence, newly added row(s) and/or column(s) causes problem for additional row or column addition or removal.  Please take a look and advise what's wrong here.

Also, sometimes, Chrome browser (the web browser I'm using for testing now) complaines that myTBL.rows.length undefined, how come?

Thanks.

On Tuesday, October 25, 2016 at 8:35:19 PM UTC-4, justaguy wrote:
> Here's the code and I attempted to apply some CSS code for TR and TD but largely ineffective, what's wrong?  
> 
> Thanks.
> 
> 	/* 	author: me...
> 	function: insert HTML table to the end of the body
> 	date: 10/25/2016
> 	(1) default: 4 columns and 10 rows
> 	*/
> 	
> var KN = {};
> 		
> 	KN.insertTBL = function() {
> 	
> 		// error handling, 10/20/2016	
> 				
> 		// first, create table
> 		tbl = document.createElement('table');				
> 			// creates a table row 
> 				newrow = [];
> 				newrow[0] = document.createElement("tr"); 
> 				 //	newrow.id = 'row'+cnt; 
> 				 // create 4 td(s)
> 				 /* one method
> 				 cell = [];
> 				 cell[0] = document.createElement("td");   
> 				 cell[1] = document.createElement("td");
> 				 cell[2] = document.createElement("td");
> 				 cell[3] = document.createElement("td");	
> 				 */
> 				 // insert 4 TD(s) to tr[0]
> 				 // it would be elegant to use one line statement to do so but...
> 				 for (c = 0; c < 4; c++) {
> 					newrow[0].insertCell(c);
> 					// debug
> 					console.log(newrow[0]);
> 				 }
> 				
> 				// add to tbl
> 				tbl.appendChild(newrow[0]);
> 				
> 		 // create 9 more tr(s)
> 		 for (r = 1; r < 10; r++) {
> 			newrow[r] = newrow[0].cloneNode(true);
> 			// add to tbl
> 			tbl.appendChild(newrow[r]);
> 			}
> 		
> 		// apply style
> 		tbl.setAttribute('style','background-color:lightblue; tr {height: 25px; width: 120px}; td {height: 25px; width: 30px};');
> 		// tbl.setAttribute('style','width: 90%; height:60%;')
> 		// tbl.setAttribute('style','border: 1px solid grey');
> 		// tbl.setAttribute('style','tr {height: 25px; width: 120px;}');
> 		
> 		// add table to body
> 		document.body.append(tbl);
> }

0
justaguy
10/28/2016 10:26:57 PM
Reply: