jQueryで新しい行（特別な場合）を追加しますか？

Question

私は行を含む表を作成し、最後に各行に 'td'があります。新しい行を挿入するための 'img'があります。onClick = "addRow（）"この新しい行をクリックした行の下に挿入します。私は、行X及び列Yを持っていると私はXの行の「IMG」をクリックした場合明らかに、私は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のセルが必要ですか？ 任意の助けが理解されるであろう... jQueryので

Answer 1

onClick属性を削除し、あなたのページに次のコードを追加します。テーブルとテーブルがクラス「rowContainer」を持っていた後に、このHTMLを

(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)))); 

    ); 
    } 
})(); 

Answer 2

が、それはこのようになります：

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

jsfiddle：

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

修正imgタグ：http://jsfiddle.net/jasonmiesionczek/p44Kr/

Answer 3

これを試してみてくださいこのように：

<img onClick="addRow(this)"... > 

Answer 4

<img class="addRow" width="20px" height="20px" src="images/add_32.png"/> 

場所。

次のjQueryをスクリプトタグに追加します。

$(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); 
     }); 
});