Добавить новую строку (особый случай) с помощью jQuery? - PullRequest
Новая
       6

Добавить новую строку (особый случай) с помощью jQuery?

0 голосов
/ 10 июля 2011

Я создаю таблицу, содержащую строки, и в последнем 'td' в каждой строке есть 'img' для вставки новой строки onClick="addRow()". Я хочу, чтобы эта новая строка была вставлена ​​ниже щелкаемой строки. Ясно, что если у меня есть строка X и строка Y, и я нажимаю «img» в строке X, тогда я получу новую строку ниже X и выше Y. Я использовал этот код для вставки: 

function addRow()
{

    var newRow = document.all("tblGrid").insertRow(-1);

    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t1'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t2'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t3'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t4'>";   
}

а это стол: 

<table id="tblGrid" cellspacing="0">
    <tr>

      <th>Instraction</th>
      <th>Result</th>
      <th>Time</th>
      <th>Date</th>
      <th>Add</th>
    </tr>
    <?php do { ?>
      <tr>
        <td><?php echo $row_instRecordset['instName']; ?></td>
        <td><?php echo $row_instRecordset['instValue']; ?></td>
        <td><?php echo $row_instRecordset['instTime']; ?></td>
        <td><?php echo $row_instRecordset['instDate']; ?></td>
        <td><img onClick="addRow()" width="20px" height="20px" src="images/add_32.png"/></td>
      </tr>
      <?php } while ($row_instRecordset = mysql_fetch_assoc($instRecordset)); ?>
  </table>

Как я могу сделать это с помощью jQuery? Мне также нужно, чтобы 3-я ячейка отображала текущее время, а 4-я ячейка - автоматически сгенерированная текущая дата? Любая помощь будет оценена ...

Ответы [ 4 ]

0 голосов
/ 10 июля 2011 
<img class="addRow" width="20px" height="20px" src="images/add_32.png"/>

поместите этот html после того, как таблица и таблица имеют класс "rowContainer" .

Добавьте следующий jQuery в тег script. 

$(document).ready(function(){
      var newRow="<tr><td><input type='text' name='t1'></td>"; 
      newRow+= "<td><input type='text' name='t2'></td>";
      newRow+= "<td><input type='text' name='t3'></td>";
      newRow+= "<td><input type='text' name='t4'></td></tr>";
      $('.addRow').click(function(){
            $('.rowContainer').append(newRow);
      });
});
0 голосов
/ 10 июля 2011

Попробуйте это: 

function addRow(elem)
{
   $(elem).closest('tr').append('[html for new tr]');
}

Изменить тег img следующим образом: 

<img onClick="addRow(this)"... >
0 голосов
/ 10 июля 2011

Удалите атрибут onClick и добавьте следующий код на свою страницу: 

(function() {
  $('td img').live('click', function() {
     d = new Date();
     date = d.getMonth() + '/' + d.getDay() + '/' + d.getFullYear();
     time = d.getHours() + ':' + d.getMinutes();
     $(this).closest('tr').after(
       $('<tr>').append(
         $('<td>').html($('<input>').attr({'type': 'input', 'name': 't1'})))
         .append($('<td>').html($('<input>').attr({'type': 'input', 'name': 't2'})))
         .append($('<td>').html($('<input>').attr({'type': 'input', 'name': 't3'}).val(date)))
         .append($('<td>').html($('<input>').attr({'type': 'input', 'name': 't4'}).val(time))));

     );
  }
})();
0 голосов
/ 10 июля 2011

В jQuery это будет выглядеть примерно так: 

$(function() {
    $("td img").live('click',function() {
        var row = $("<tr></tr>").html("<td>test</td><td></td><td></td>");
        $("#tblGrid").append(row);
    });
});

jsfiddle: http://jsfiddle.net/jasonmiesionczek/p44Kr/

...