필자는 html 테이블에 행을 삽입 할 수있는 솔루션을 개발 중이다. 그게 꽤 까다 롭습니다. 필자는 첫 번째 "삽입"에 대해서만 작동하는 것을 발견했습니다. 나는 무엇을 잘못하고 있는지 파악할 수 없다.JQuery 삽입 테이블 행
Ive 기본 테이블에는 3 개의 열이 있고 각 테이블에는 2 개의 행 사이에 행을 삽입 할 수있는 버튼이 있습니다. Ive는이 사이트에서 솔루션을 검색하고 작동하는 jquery 솔루션을 얻었습니다. 즉 버튼을 누르면 원하는 행을 추가 할 수 있습니다. 하지만 내가 마지막 행을 삽입 한 후 다른 행을 추가하면 행이 1 위치 뒤로 삽입되고 다음 번에 삽입 된 2 행 등이 누락됩니다. 이?
더 좋은 방법이 있나요? 즉 임의의 위치에서 테이블에 행을 추가합니까?
JQuery code;
<script>
$(document).ready(function(){
$(".addRow").click(function(event){
//get the button id to get the row
var $id=this.id;
var $totrecords;
var $newrow;
var $totalrowsadded;
//get id of clicked button
$id=$id.replace("add_", "");
$totrecords=document.getElementById('totalrecords').value;
$totrecords++;
//store number of rows added
$totalrowsadded=document.getElementById('totalrowsadded').value;
$totalrowsadded++;
document.getElementById('totalrowsadded').value=$totalrowsadded;
//update record count
document.getElementById('totalrecords').value=$totrecords;
var $html='<tr class="newrow"><td>'+$totrecords+'<button type="button" class="addRow" id="add_'+$totrecords+'">add</button></td><td><label for="ProductHeight'+$totrecords+'">height</label><input name="data[Product][height'+$totrecords+']" type="text" value="0" id="ProductHeight'+$totrecords+'"/></td><td><label for="ProductWidth'+$totrecords+'">width</label><input name="data[Product][width'+$totrecords+']" type="text" value="0" id="ProductWidth'+$totrecords+'"/></td><td><label for="ProductPrice'+$totrecords+'">List Price</label><input name="data[Product][price'+$totrecords+']" type="text" id="ProductPrice'+$totrecords+'"/></td></tr>';
$newrow=parseInt($id)+1;
alert('new row insert at '+$newrow);
$('#productstable > tbody> tr:nth-child(' + $newrow + ')').after($html);
});
});
</script>
내 테이블은 다음과 같습니다.
<table id="productstable">
<tr>
<th>Insert</th>
<th>Height</th>
<th>Width</th>
<th>List price</th>
</tr>
<tbody>
<tr id="0">
<td>0 :<button type="button" class="addRow" id="add_0">add</button></td>
<td><label for="ProductHeight0">height</label><input name="data[Product][height0]" type="text" value="115" id="ProductHeight0"/></td>
<td><label for="ProductWidth0">width</label><input name="data[Product][width0]" type="text" value="595" id="ProductWidth0"/></td>
<td><label for="ProductPrice0">List Price</label><input name="data[Product][price0]" type="text" id="ProductPrice0"/></td>
</tr>
<tr id="1">
<td>1 :<button type="button" class="addRow" id="add_1">add</button></td>
<td><label for="ProductHeight1">height</label><input name="data[Product][height1]" type="text" value="140" id="ProductHeight1"/></td>
<td><label for="ProductWidth1">width</label><input name="data[Product][width1]" type="text" value="295" id="ProductWidth1"/></td>
<td><label for="ProductPrice1">List Price</label><input name="data[Product][price1]" type="text" id="ProductPrice1"/></td>
</tr>
<tr id="2">
<td>2 :<button type="button" class="addRow" id="add_2">add</button></td>
<td><label for="ProductHeight2">height</label><input name="data[Product][height2]" type="text" value="140" id="ProductHeight2"/></td>
<td><label for="ProductWidth2">width</label><input name="data[Product][width2]" type="text" value="395" id="ProductWidth2"/></td>
<td><label for="ProductPrice2">List Price</label><input name="data[Product][price2]" type="text" id="ProductPrice2"/></td>
</tr>
<tr id="3">
<td>3 :<button type="button" class="addRow" id="add_3">add</button></td>
<td><label for="ProductHeight3">height</label><input name="data[Product][height3]" type="text" value="140" id="ProductHeight3"/></td>
<td><label for="ProductWidth3">width</label><input name="data[Product][width3]" type="text" value="495" id="ProductWidth3"/></td>
<td><label for="ProductPrice3">List Price</label><input name="data[Product][price3]" type="text" id="ProductPrice3"/></td>
</tr>
</tbody>
</table>
더 많은 정렬 목록과 비슷합니다. maxy는 HTML 코드를보고 싶습니다. – Smamatti
메신저 cakephp 2.0을 사용하는 이유는 출력이 그런 이유입니다. –
추가는 테이블의 시작 부분에만 붙입니다. –