js动态创建select

<!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

你可能感兴趣的:(js动态创建select)