Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #31610 > unrolled thread

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

Started byjustaguy <lichunshen84@gmail.com>
First post2016-10-25 17:34 -0700
Last post2016-10-28 15:26 -0700
Articles 10 — 4 participants

Back to article view | Back to comp.lang.javascript

Contents

  Creating table on the fly -> created, however, how to apply TR / TD width and height? justaguy <lichunshen84@gmail.com> - 2016-10-25 17:34 -0700
    Re: Creating table on the fly -> created, however, how to apply TR / TD width and height? justaguy <lichunshen84@gmail.com> - 2016-10-25 19:04 -0700
    Re: Creating table on the fly -> created, however, how to apply TR / TD width and height? justaguy <lichunshen84@gmail.com> - 2016-10-25 19:19 -0700
    Re: Creating table on the fly -> created, however, how to apply TR / TD width and height? justaguy <lichunshen84@gmail.com> - 2016-10-25 19:22 -0700
    Re: Creating table on the fly -> created, however, how to apply TR / TD width and height? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-26 16:46 +0100
      Re: Creating table on the fly -> created, however, how to apply TR / TD width and height? justaguy <lichunshen84@gmail.com> - 2016-10-26 18:07 -0700
        Re: Creating table on the fly -> created, however, how to apply TR / TD width and height? Osmo Saarikumpu <osmo@weppipakki.com> - 2016-10-27 06:47 +0300
    Re: Creating table on the fly -> created, however, how to apply TR / TD width and height? Silvio <silvio@internet.com> - 2016-10-27 16:32 +0200
      Re: Creating table on the fly -> created, however, how to apply TR / TD width and height? justaguy <lichunshen84@gmail.com> - 2016-10-28 10:24 -0700
    Re: Creating table on the fly -> created, however, how to apply TR / TD width and height? justaguy <lichunshen84@gmail.com> - 2016-10-28 15:26 -0700

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

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-25 17:34 -0700
SubjectCreating table on the fly -> created, however, how to apply TR / TD width and height?
Message-ID<50af2c05-705d-4c81-941a-1ff9dbc30662@googlegroups.com>
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);
}

[toc] | [next] | [standalone]

#31611

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-25 19:04 -0700
Message-ID<b2ddb2ee-a65c-4599-9290-70817a5466b5@googlegroups.com>
In reply to#31610
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.

[toc] | [prev] | [next] | [standalone]

#31612

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-25 19:19 -0700
Message-ID<dbbe3415-fc2c-4f77-a3f3-b29ec7f2d522@googlegroups.com>
In reply to#31610
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.

[toc] | [prev] | [next] | [standalone]

#31613

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-25 19:22 -0700
Message-ID<19a2d913-5260-4882-babc-b79aa9cb0d65@googlegroups.com>
In reply to#31610
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);
> }

[toc] | [prev] | [next] | [standalone]

#31615

FromJohn Harris <niam@jghnorth.org.uk.invalid>
Date2016-10-26 16:46 +0100
Message-ID<5sj11cdrn4scr298qfhgd6d774gtv2ten0@4ax.com>
In reply to#31610
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 = 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

[toc] | [prev] | [next] | [standalone]

#31617

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-26 18:07 -0700
Message-ID<806ff118-9756-44f1-a943-6ebf7d89a557@googlegroups.com>
In reply to#31615
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

[toc] | [prev] | [next] | [standalone]

#31618

FromOsmo Saarikumpu <osmo@weppipakki.com>
Date2016-10-27 06:47 +0300
Message-ID<nurtbk$t6q$1@dont-email.me>
In reply to#31617
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

[toc] | [prev] | [next] | [standalone]

#31621

FromSilvio <silvio@internet.com>
Date2016-10-27 16:32 +0200
Message-ID<58121017$0$1784$e4fe514c@newszilla.xs4all.nl>
In reply to#31610
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.

[toc] | [prev] | [next] | [standalone]

#31623

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-28 10:24 -0700
Message-ID<dcdb03b0-0c40-4f9e-b1e5-ad7afc358981@googlegroups.com>
In reply to#31621
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.

[toc] | [prev] | [next] | [standalone]

#31624

Fromjustaguy <lichunshen84@gmail.com>
Date2016-10-28 15:26 -0700
Message-ID<8f6ae4a1-095b-4840-9948-e2379a8ff26b@googlegroups.com>
In reply to#31610
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);
> }

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web