добавить <td> в таблицу с помощью JavaScript (JQuery)

-1

У меня есть это PHP в моем приложении,добавить <td> в таблицу с помощью JavaScript (JQuery)

<table><tr> 
       <?php 

       if($music_interests !== FALSE) 
       { 
        $count = 0; 
        foreach($music_interests as $interest) 
        { 
        ?> 
        <td> 
        <div class="interest inline"> 
         <img src="<?php echo $interest['image']; ?>" alt="<?php echo truncate($interest['name'], 25); ?>" class="interest_img"/> 
         <p><?php echo truncate($interest['name'], 25); ?></p> 

         <div class="interest_popup"> 
          <img src="<?php echo $interest['image']; ?>" alt="<?php echo truncate($interest['name'], 25); ?>" class="interest_img left"/> 
          <div class="right"> 
           <strong><?php echo truncate($interest['name'], 25); ?></strong> 
           <p>Music<br><?php echo @$interest['num_users']; ?> users have this interest.</p> 
           <?php echo anchor('my_profile/remove_interest/'.$interest['id'], 'Remove interest', array('class' => 'button red upper rounded_5 small remove')); ?> 
          </div> 
          <div class="clear"></div> 
         </div><!--.interest_popup--> 
        </div> 
        </td> 
        <?php 
        $count = ($count + 1)%4; 
        if ($count == 0) 
        { 
         echo "</tr><tr>"; 
        } 
        } 
       } 
       ?>

Как вы можете видеть, что PHP создает таблицу и каждый четвёртый <td> создает новую строку , Теперь я добавляю функцию ajax для своего приложения, но не могу понять, как бы я работал, если мне нужно создать новую строку сначала, прежде чем добавить <td>, который создал мой запрос ajax.

В настоящее время у меня есть этот код, который добавляет тд к моему столу,

var interest = "<td>" + msg.name + "</td>"; 
self.parent().children('table').append(interest);

источник

2012-03-17 Udders

Ваше заявление: «но я не могу разобраться, как я буду работать, если мне нужно создать новую строку, прежде чем добавить , который создал мой запрос ajax». не очень понятно. Является ли ответ от вашего запроса ajax надежно последовательным? – Mzn

Ответ от моего ajax последователен да. – Udders

Вы не должны добавляемые ячеек таблицы непосредственно в таблицу. Ячейки таблицы попадают в строки таблицы.

Получите последнюю строку в таблице и проверьте, сколько там ячеек. Если уже есть четыре ячейки, вам нужно создать новую строку таблицы и добавить ее в таблицу, а затем добавить ячейку в эту строку. В противном случае вы можете добавить ячейку в существующую строку.

источник

2012-03-17 00:21:01 Guffa

Warnign! непроверенный код! Я хотел бы сделать что-то вроде этого:

var interest = "<td>" + msg.name + "</td>"; 
var $lastTr = self.parent().children('table tr:last'); 
if ($lastTr.find("td").size() < 4) { 
    $lastTr.append(interest); 
} else { 
    interest = "<tr>" + interest + "</tr>"; 
    self.parent().children('table').append(interest); 
}

источник

2012-03-17 00:23:32 Chango

Я только что изменил код sico87, я думаю, что 'self' является объектом jQuery. – Chango

-1

ответ нашел на this question:

// pass stuff to insert to .after() as an HTML string 
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

документация для :last psuedoselector и .after() function

источник

2012-03-17 00:27:40 jbabey

Хорошая идея добавить строки в таблицу, но вопрос не только в этом. – Chango

Update: Я изменил ответ, так как теперь у меня есть лучшее понимание вопроса ,

Вот пример, который показывает, как вы можете динамически создавать td и tr элементов. Замените постоянное содержимое («некоторое значение») на все, что вы используете с помощью AJAX.

JSFiddle (JQuery 1.7.1 добавлено): http://jsfiddle.net/BUR7p/3/

<html> 
    <head> 
     <script language="javascript" type="text/javascript"> 
      //my previous understanding of the question 
      //function AddNewRow() 
      //{ 
      // var row = $(document.createElement("tr")); 
      // row.append("<td>some value</td>"); 
      // row.append("<td>another val</td>"); 
      // $("#mytable").children().append(row);    
      //} 

      //my corrected understanding: you don't know how 
      //to decide how to create a new row to put in the 
      //table. note i added a table body explicitly, it 
      //is added by default automatically if you don't. 
      function AddNewData() 
      { 
       var row = $("#tablebody").children().last(); 
       if(row.children().length >= 4) 
       { 
        console.log("creating a new row..."); 
        //create a new row if we need one 
        row = $(document.createElement("tr")); 
        $("#tablebody").append(row);   
       } 
       else console.log("using existing row..."); 

       //add new datum to row 
       row.append("<td>some value</td>"); 
      } 
     </script> 
    </head> 
    <body> 
     <p> 
      <table id="mytable"> 
       <tbody id="tablebody"> 
       <tr> 
        <td>one</td> 
        <td>two</td> 
       </tr> 
       <tr> 
        <td>three</td> 
        <td>four</td> 
       </tr> 
      </tbody> 
      </table> 
     </p> 
     <a href="#" onclick="AddNewData()">Add new row</a> 
    </body> 
</html>

В качестве альтернативы, можно модифицировать на стороне сервера таким образом, что возвращает, в дополнение к данным, флаг ли данные должны быть созданный в новой строке или нет.

Пожалуйста, проследите и сообщите нам, помогает ли это или нет.

источник

2012-03-17 13:19:01 Mzn

добавить <td> в таблицу с помощью JavaScript (JQuery)

ответ

Смежные вопросы