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

Groups > comp.lang.javascript > #17407

Re: Problem w/ creating dynamic TR and its TDs

Show all headers | View raw

W dniu 2012-12-02 03:46, Thomas 'PointedEars' Lahn pisze:
> Cezary Tomczyk wrote:
>
>> W dniu 2012-12-02 00:17, justaguy pisze:
>>> I've done such dynamic creation of TR and its TDs a while ago... but
>>> runs into problem.
>>> The thought is, if I have a current TR with ID of "row1", then the
>>> following code should be able to create a new TR and its TDs and
>>> append them to the "row1" Row.
>>>
>>> HTML:
>>> <table>
>>> <tr id="row1">
>>>     <td><input type="text" id="myname" name="myname"><td>
>>>     <td><input type="text" id="mydesc" name="mydesc"><td>
>>> </tr>
>>> </table>
>>>
>>> Javascript:
>>> // find or define current row
>>> var currentRow = "row1">
>>>
>>> // create new Row and Cells
>>> var cnt = 1;
>>> var newrow = document.createElement("tr");
>>> var cell = document.createElement("td");
>>> var cellText = document.createTextNode("<input type=text
>>> name=partnumber"+cnt+ "id=partnumber"+cnt+ "class=autocomplete>");
>>> cell.appendChild(cellText);
>>> newrow.appendChild(cell);
>>>
>>> // now append the new Row and its Cells to current row
>>> currentRow.appendChild(newrow);
>>>
>>> Question, that line of
>>> var cellText = document.createTextNode("<input type=text
>>> name=partnumber"+cnt+ "id=partnumber"+cnt+ "class=autocomplete>");
>>> is wrong, that is, it's a text node, not an input node, and I don't
>>> think there's something like createInputNode something, so, how do we
>>> do it?
>>
>> You can use something like this as a workaround for old IE and problems
>> with "input type name":
>
> There is no such problem.  You are confusing this with changing the value of
> the `type' property of an `input' element object after the corresponding
> element has been appended.

I am refereeing to old IE bug described on 
http://webbugtrack.blogspot.cz/2007/10/bug-235-createelement-is-broken-in-ie.html. 
Of course, problem with setting dynamically attribute "name" is only in 
IE 7 and lower.

>> elm - node name
>> attributes - object with atttributes
>>
>> var createElement = function(elm, attributes){
>>       var div = document.createElement("div"),
>
> Unnecessary; potentially harmful here (a `div' element in a `td' element).
>>           element = document.createElement(elm);
>
> OK.
>
>>       for(var p in attributes){
>
> Iterates over enumerable properties of `attributes'.  Better:
>
>    for (var keys = Object.keys(attributes), i = 0, len = keys.length;
>         i < len;
>         ++i)
>
> or pre-ES 5.1 variants thereof.  See also jsx.object.getKeys().

I tried to use Object.keys many times, but seems that it is very slow. 
See test: http://jsperf.com/loop-for-in-vs-object-keys-foreach/2

And yes, I remember your opinion about those tests :-)

>>         element[p]= attributes[p];
>
> Fails to account for the mapping of attribute names that are reserved words
> to special attribute properties (like "for" → "htmlFor"), and of the `style'
> attribute.  See also jsx.dom.setAttr().

Right. Actually I use mapping for attributes:

         'for' : 'htmlFor',
         accesskey : 'accessKey',
         codebase : 'codeBase',
         frameborder : 'frameBorder',
         framespacing : 'frameSpacing',
         nowrap : 'noWrap',
         maxlength : 'maxLength',
         'class' : 'className',
         readonly : 'readOnly',
         longdesc : 'longDesc',
         tabindex : 'tabIndex',
         rowspan : 'rowSpan',
         colspan : 'colSpan',
         ismap : 'isMap',
         usemap : 'useMap',
         cellpadding : 'cellPadding',
         cellspacing : 'cellSpacing',
         contenteditable : 'contentEditable'

>>       }
>>
>>       div.appendChild(element);
>>       return div.firstChild;
>
> I beg your pardon?  What exactly are you creating the `div' element for if
> you are not returning a reference to it?  Mystical incantation?

I can not be sure now (it was long time ago), but as I remember I did 
this because <input> element had to be append somewhere to create 
properly <input> element with "name" attribute.

However, today is not necessary.

>> };
>>
>> This is just an example and probably code could be more improved.
>
> It is a solution looking for a problem while creating more problems than it
> fails to solve.   The correct way to address the problem actually posed by
> the question (as opposed to your answer) is:
>
>    var input = document.createElement("input");
>    input.name = "partnumber" + cnt;
>    input.id = "partnumber" + cnt;
>    input.className = "autocomplete";
>    cell.appendChild(input);

Well, today I bet that most browsers working with that well. I just 
referred to problems with IE7 and lower during creating dynamically 
<input> element.

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Problem w/ creating dynamic TR and its TDs justaguy <lichunshen84@gmail.com> - 2012-12-01 15:17 -0800
  Re: Problem w/ creating dynamic TR and its TDs Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2012-12-02 00:34 +0100
    Re: Problem w/ creating dynamic TR and its TDs justaguy <lichunshen84@gmail.com> - 2012-12-01 17:06 -0800
    Re: Problem w/ creating dynamic TR and its TDs Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-12-02 03:46 +0100
      Re: Problem w/ creating dynamic TR and its TDs justaguy <lichunshen84@gmail.com> - 2012-12-01 19:27 -0800
        Re: Problem w/ creating dynamic TR and its TDs Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-12-03 22:53 +0100
      Re: Problem w/ creating dynamic TR and its TDs Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2012-12-02 08:43 +0100
        Re: Problem w/ creating dynamic TR and its TDs Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-12-02 16:11 +0100
          Re: Problem w/ creating dynamic TR and its TDs Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2012-12-02 18:48 +0100
            Re: Problem w/ creating dynamic TR and its TDs Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-12-02 19:35 +0100
              Re: Problem w/ creating dynamic TR and its TDs Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-12-02 19:39 +0100

csiph-web