Динамическое добавление строк в HTML

Question

Динамическое добавление строк в HTML

0

Вот что я получил после многих исследований, поэтому, хотя я поделюсь им,

Пожалуйста, дайте мне знать, если я могу оптимизировать его больше. Этот код добавляет новую строку при нажатии на строку добавления, а также динамически присваивает идентификатор и имя.

        <script type="text/javascript">
        $(document).ready(function(e) {
        //n:variable for generating dynamic values
        var n=1;
        $("#add").click(function() {    
        n++;

       // converting HTML to JS readable format
       var strVar="";
       strVar += "<tr>";
       strVar += "        <td id=\"day\">Day ";
       strVar += n;
       strVar +=" <\/td>";
       strVar += "        <td><textarea name=\"" ;
       strVar += n;
       strVar +="\"cols=\"50\" rows=\"10\" id=\"" 
       strVar += n;
       strVar +="\"><\/textarea><\/td>";
       strVar += "      <\/tr>";

     $(strVar).insertAfter("#mytable tr:nth-last-child(3)");
             document.getElementById("h").value= n;     
             return false;
             });

      });

   </script>

HTML

    <table>
    <tr id="test">
      <td id="day">Day 1</td>
      <td><textarea name="1" cols="50" rows="10" id="1"></textarea></td>
    </tr>




  <tr><td>&nbsp;</a></td><td><a href="#" id="add" style="color:#00F">Add another Day</td>   </tr>
  <tr>
    <!-- sending hidden field with the number of fields generated for entering into db using php-->
    <td>&nbsp; <input type="hidden" id="h" value=""/>  </td>
    <td><input type="image" name="button"  src="../images/admin/submit.png" onMouseOver="this.src='../images/admin/submit_hover.png'" onMouseOut="this.src='../images/admin/submit.png'" id="button" value="Add this Item now"></td>
  </tr>
  </table>

CleanX 01 дек. 2013, в 13:51

Источник

Теги:

php

javascript

html

html5

dom

1 ответ

Ещё вопросы

cocco · Accepted Answer · 2013-12-01T09-51-00.000Z

documentfragment здесь, чтобы создавать быстрые dom-узлы.

var f=document.createDocumentFragment();
for(var a=0;a<5;a++){
 var field=document.createElement('td');
 field.textContent='field '+a;
 f.appendChild(field);
}
yourTable.appendChild(document.createElement('tr')).appendChild(f);

медленнее, но короче.

var tr='<tr><td>field '+['1','2','3','4','5'].join('</td><td>field ')+'</td></tr>';

Почему бы тебе не добавить td прямо в tr ?
потому что documentfragment здесь для создания быстрых узлов dom
проверить это jsperf или console.time (). почему это должно быть медленнее ?? Я предпочитаю быстрые сайты. В любом случае я опубликовал 2 решения, которые мне нравятся. Вы можете выбрать все, что захотите.
Ну, я спросил почему, а не как ты мог доказать это. Кроме того, я думаю, что это не то же самое для другого браузера.
как только вы добавляете более одной переменной, которая должна быть вставлена в документный фрагмент узла td, всегда быстрее.