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

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

For 2 dynamically generated TD

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

Contents

  For 2 dynamically generated TD justaguy <lichunshen84@gmail.com> - 2016-09-16 18:58 -0700
    Re: For 2 dynamically generated TD "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-09-17 10:52 +0200
      Re: For 2 dynamically generated TD justaguy <lichunshen84@gmail.com> - 2016-09-17 04:45 -0700
        Re: For 2 dynamically generated TD justaguy <lichunshen84@gmail.com> - 2016-09-17 04:48 -0700
          Re: For 2 dynamically generated TD "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-09-17 14:04 +0200
            Re: For 2 dynamically generated TD justaguy <lichunshen84@gmail.com> - 2016-09-17 06:03 -0700
        Re: For 2 dynamically generated TD "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-09-17 13:56 +0200
      Re: For 2 dynamically generated TD Dr J R Stockton <reply1600@merlyn.demon.co.uk.invalid> - 2016-09-18 21:04 +0100
        Re: For 2 dynamically generated TD "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-09-19 10:26 +0200

#31390 — For 2 dynamically generated TD

How to set the first TD left aligned and 
the second TD left aligned to the first TD?

Thanks.

[toc] | [next] | [standalone]

#31392

justaguy <lichunshen84@gmail.com> wrote on 17 Sep 2016 in 
comp.lang.javascript:

> How to set the first TD left aligned and 
> the second TD left aligned to the first TD?

'left aligned', imho, 
is an internal effect of text [and other inline elements] 
in a container, like in a <td>.

You better give a minimalisitc working example.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#31393

Ok, here's the code.

// creating row and creating all cells
// creates a table row
var newrow = document.createElement("tr");
newrow.setAttribute('style','td {padding: 10px}');

// cell 1
    var cell = document.createElement("td");            
    cell.colSpan = "2"; 
    // cell.setAttribute('style','padding: 10px');              
    var cellText = document.createElement('input');
    cellText.type = 'text';
    cellText.id = 'fLabel';
    cellText.name = 'fLabel';
    cellText.size = "20";
    cell.appendChild(cellText);
    newrow.appendChild(cell);       

// cell 2
    var cell = document.createElement("td");
    cell.colSpan = "3";
    var cellText = document.createElement('input');
    cellText.type = 'text';
    cellText.id = 'fValue';
    cellText.name = 'fValue';
    cellText.size = "80";
    cell.appendChild(cellText);
    newrow.appendChild(cell);

    // code to append the new TR to table
    // ...  


Additionally,  the page is complex, it has tons of other stuff, tons of dynamically generated elements before and after. thanks

On Saturday, September 17, 2016 at 4:52:41 AM UTC-4, Evertjan. wrote:
> justaguy <.com> wrote on 17 Sep 2016 in 
> comp.lang.javascript:
> 
> > How to set the first TD left aligned and 
> > the second TD left aligned to the first TD?
> 
> 'left aligned', imho, 
> is an internal effect of text [and other inline elements] 
> in a container, like in a <td>.
> 
> You better give a minimalisitc working example.
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

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

#31394

On Saturday, September 17, 2016 at 7:46:02 AM UTC-4, justaguy wrote:
> Ok, here's the code.
> 
> // creating row and creating all cells
> // creates a table row
> var newrow = document.createElement("tr");
> newrow.setAttribute('style','td {padding: 10px}');
> 
> // cell 1
>     var cell = document.createElement("td");            
>     cell.colSpan = "2"; 
>     // cell.setAttribute('style','padding: 10px');              
>     var cellText = document.createElement('input');
>     cellText.type = 'text';
>     cellText.id = 'fLabel';
>     cellText.name = 'fLabel';
>     cellText.size = "20";
>     cell.appendChild(cellText);
>     newrow.appendChild(cell);       
> 
> // cell 2
>     var cell = document.createElement("td");
>     cell.colSpan = "3";
>     var cellText = document.createElement('input');
>     cellText.type = 'text';
>     cellText.id = 'fValue';
>     cellText.name = 'fValue';
>     cellText.size = "80";
>     cell.appendChild(cellText);
>     newrow.appendChild(cell);
> 
>     // code to append the new TR to table
>     // ...  
> 
> 
> Additionally,  the page is complex, it has tons of other stuff, tons of dynamically generated elements before and after. thanks
> 
> On Saturday, September 17, 2016 at 4:52:41 AM UTC-4, Evertjan. wrote:
> > justaguy <.com> wrote on 17 Sep 2016 in 
> > comp.lang.javascript:
> > 
> > > How to set the first TD left aligned and 
> > > the second TD left aligned to the first TD?
> > 
> > 'left aligned', imho, 
> > is an internal effect of text [and other inline elements] 
> > in a container, like in a <td>.
> > 
> > You better give a minimalisitc working example.
> > 
> > -- 
> > Evertjan.
> > The Netherlands.
> > (Please change the x'es to dots in my emailaddress)

I also added some fake hidden TDs after the second TD in attempt to "sqeeze" the first two TDs closer but to no avail.

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

#31396

justaguy <lichunshen84@gmail.com> wrote on 17 Sep 2016 in
comp.lang.javascript: 

> I also added some fake hidden TDs after the second TD in attempt to
> "sqeeze" the first two TDs closer but to no avail. 

What is a "fake hidden TD"???

A <table> sizes a column to the widest <td> in it.

If you want smaller <td>'s you should use colspan='...'
for the wider <td>s in that column.

This becomes off-topic for this NG, 
as it has nothing to do with Javascript.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#31397

ahe, it's the TD Alignment with other TDs problem, resolved.  I appreciate your help.

On Saturday, September 17, 2016 at 8:04:05 AM UTC-4, Evertjan. wrote:
> justaguy <mail.com> wrote on 17 Sep 2016 in
> comp.lang.javascript: 
> 
> > I also added some fake hidden TDs after the second TD in attempt to
> > "sqeeze" the first two TDs closer but to no avail. 
> 
> What is a "fake hidden TD"???
> 
> A <table> sizes a column to the widest <td> in it.
> 
> If you want smaller <td>'s you should use colspan='...'
> for the wider <td>s in that column.
> 
> This becomes off-topic for this NG, 
> as it has nothing to do with Javascript.
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

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

#31395

justaguy <lichunshen84@gmail.com> wrote on 17 Sep 2016 in
comp.lang.javascript: 

> Ok, here's the code.

Showing the dynamic code is not minimalistic 
and does not explain [to me] what you mean by

">> > the second TD left aligned to the first TD?"

I would suggest you show a minimalistic **html** example of this,
perhaps from the F12 rendering?

> 
> // creating row and creating all cells
> // creates a table row
> var newrow = document.createElement("tr");
> newrow.setAttribute('style','td {padding: 10px}');

This seems strange, btw, wouldn't that result in

<tr style='td {padding: 10px}'>

which seems not the way of inline CSS.

 
> // cell 1
>     var cell = document.createElement("td"); 

Is this a repeating var declaration?
           
>     cell.colSpan = "2"; 
>     // cell.setAttribute('style','padding: 10px');              
>     var cellText = document.createElement('input');
>     cellText.type = 'text';
>     cellText.id = 'fLabel';
>     cellText.name = 'fLabel';
>     cellText.size = "20";
>     cell.appendChild(cellText);
>     newrow.appendChild(cell);       
> 
> // cell 2
>     var cell = document.createElement("td");

It seems it is.

>     cell.colSpan = "3";
>     var cellText = document.createElement('input');
>     cellText.type = 'text';
>     cellText.id = 'fValue';
>     cellText.name = 'fValue';
>     cellText.size = "80";
>     cell.appendChild(cellText);
>     newrow.appendChild(cell);
> 
>     // code to append the new TR to table
>     // ...  
> 
> 
> Additionally,  the page is complex, it has tons of other stuff, tons of
> dynamically generated elements before and after. thanks 
> 
> On Saturday, September 17, 2016 at 4:52:41 AM UTC-4, Evertjan. wrote:
>> justaguy <.com> wrote on 17 Sep 2016 in 
>> comp.lang.javascript:
>> 
>> > How to set the first TD left aligned and 
>> > the second TD left aligned to the first TD?
>> 
>> 'left aligned', imho, 
>> is an internal effect of text [and other inline elements] 
>> in a container, like in a <td>.
>> 
>> You better give a minimalisitc working example.
>> 
>> -- 
>> Evertjan.
>> The Netherlands.
>> (Please change the x'es to dots in my emailaddress)
> 
> 



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#31400

In comp.lang.javascript message <XnsA6866E981898eejj99@194.109.6.166>,
Sat, 17 Sep 2016 10:52:18, Evertjan. <exxjxw.hannivoort@inter.nl.net>
posted:

>
>You better give a minimalisitc working example.
>

But a working example is, be definition, working, in which case no
problem remains.  What is needed is a clear description in standard
English (or any other well-known ASCII-compatible language) of exactly
what result is wished for - and if possible a minimal complete Web-type
page of the best non-working version.

-- 
 (c) John Stockton, Surrey, UK.  ¬@merlyn.demon.co.uk   Turnpike v6.05   MIME.
 Merlyn Web Site <                       > - FAQish topics, acronyms, & links.

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

#31402

Dr J R Stockton <reply1600@merlyn.demon.co.uk.invalid> wrote on 18 Sep 2016 
in comp.lang.javascript:

> In comp.lang.javascript message <XnsA6866E981898eejj99@194.109.6.166>,
> Sat, 17 Sep 2016 10:52:18, Evertjan. <exxjxw.hannivoort@inter.nl.net>
> posted:
> 
>>
>>You better give a minimalisitc working example.
>>
> 
> But a working example is, be definition, working, in which case no
> problem remains.  What is needed is a clear description in standard
> English (or any other well-known ASCII-compatible language) of exactly
> what result is wished for - and if possible a minimal complete Web-type
> page of the best non-working version.

I don't agree here, John, as the specification:

>> How to set the first TD left aligned and 
>> the second TD left aligned to the first TD?

... can quite possibly be explained by a minimalistic example,
where the "working" includes the imperfections as compared 
to the ultimate wish.

The OP was quite content however,
when I suggested the use of colspan='...'.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [standalone]

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

csiph-web