jQueryでtableのtrの追加、削除をする方法

2016年8月21日

1.jsコード
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$(“#getAtr").click(function(){
$str=";
$str+="<tr align=’center’>";
$str+="<td><input type=’text’ name=’gameTitle[]’/></td>";
$str+="<td><input type=’file’ name=’img[]’ /></td>";
$str+="<td><input type=’text’ name=’gameContent[]’ /></td>";
$str+="<td><input type=’text’ name=’gameSource[]’ /></td>";
$str+="<td><input type=’text’ name=’gameAuthor[]’ /></td>";
$str+="<td><input type=’text’ name=’gamePosition[]’ /></td>";
$str+="<td onClick=’getDel(this)’><a href=’#’>削除</a></td>";
$str+="</tr>";
$(“#addTr").append($str);
});
});

function getDel(k){
$(k).parent().remove();
}
</script>
2.htmlコード
<table align="center" border="1″ cellpadding="0″ cellspacing="0″ width="90%">
<tr align="center">
<td>ゲーム名</td>
<td>ゲーム画像</td>
<td>ゲームコンテンツ</td>
<td>ゲーム概要</td>
<td>ゲーム開発元</td>
<td>ゲーム企画</td>
<td align="center"><a href="#" id="getAtr">追加</a></td>
</tr>
<tbody id="addTr">
<tr align="center">
<td><input type="text" name="gameTitle[]"/></td>
<td><input type="file" name="img[]" /></td>
<td><input type="text" name="gameContent[]" /></td>
<td><input type="text" name="gameSource[]" /></td>
<td><input type="text" name="gameAuthor[]" /></td>
<td><input type="text" name="gamePosition[]" /></td>
<td></td>
</tr>
</tbody>
<tr align="center">
<td colspan="5″><input type="submit" value="追加" /></td>
</tr>
</table>