<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js动态创建select</title>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(function () {
var _this = $('.list').find('tbody');
//添加
var _html = '<tr><td></td><td>' + _this.parent().find('.demo').find('.tdd').html() + '</td></tr>';//可自行修改创建select的位置
$('.addAppIntegral').click(function () {
//$(this).parents('.list').find('tbody').append(_html);//在某一元素内追加子元素
$(this).parents('.list').find('tbody').find('.demo').after(_html);//在某一元素的后面追加子元素(即紧跟在class="demo"的tr元素后面添加)
})
//删除
$('.delAppIntegral').live('click', function () {
var _tr = $(this).parents('tr');
if (_tr.attr('class') != "demo") {
if (confirm("你确定要删除这条数据吗？")) { _tr.remove(); }
}
})
})
</script>
</head>
<body>
<table class="table list">
<tbody>
<tr class="demo">
<td>积分类型：</td>
<td class="tdd">
<select id="name_jflx2">
<option value="应用分发安装奖励" selected="">应用分发安装奖励</option>
<option value="应用分发留存奖励">应用分发留存奖励</option>
<option value="应用安装奖励">应用安装奖励</option>
<option value="2日打开奖励">2日打开奖励</option>
<option value="3日打开奖励">3日打开奖励</option>
<option value="4日打开奖励">4日打开奖励</option>
<option value="5日打开奖励">5日打开奖励</option>
<option value="6日打开奖励">6日打开奖励</option>
<option value="7日打开奖励">7日打开奖励</option>
<option value="30日打开奖励">30日打开奖励</option>
</select>
<select id="name_hqtj2">
<option value="现场安装" selected="">现场安装</option>
<option value="辅导打开">辅导打开</option>
<option value="次日留存">次日留存</option>
</select>
<input type="button" class="btn delAppIntegral" value="删除">
</td>
</tr>
<tr>
<td><input type="button" class="btn addAppIntegral" value="添加"></td>
</tr>
<tr><td>积分值：</td><td><input type="text"></td></tr>
</tbody>
</table>
</body>
</html>效果图：
下载地址：http://www.oschina.net/code/snippet_2267663_45380
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
