文档章节

动态创建select

闊苡訆涐囍醣
 闊苡訆涐囍醣
发布于 2016/03/31 15:30
字数 450
阅读 36
收藏 3
<!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

© 著作权归作者所有

闊苡訆涐囍醣
粉丝 5
博文 55
码字总数 11603
作品 0
徐汇
后端工程师
私信 提问
hive从查询中获取数据插入到表或动态分区

Hive的insert语句能够从查询语句中获取数据,并同时将数据Load到目标表中。现在假定有一个已有数据的表staged_employees(雇员信息全量表),所属国家cnty和所属州st是该表的两个属性,我们做...

码农啊就是弄嘛
2014/04/16
978
0
hive load insert

本文主要是翻译Hive官网关于Load的解释,原文来源于:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+DML#LanguageManualDML-Loadingfilesintotables 介绍 Hive Load语句......

hblt-j
2018/12/12
50
1
深入理解 Hive 分区分桶 (Inceptor)

分区是hive存放数据的一种方式。将列值作为目录来存放数据,就是一个分区。这样查询时使用分区列进行过滤,只需根据列值直接扫描对应目录下的数据,不扫描其他不关心的分区,快速定位,提高查...

hblt-j
03/25
84
0
Vue.js 2.0之select级联下拉框

在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js ...

w-rain
2017/02/28
4.3K
2
hive中的静态分区与动态分区

hive中创建分区表没有什么复杂的分区类型(范围分区、列表分区、hash分区、混合分区等)。分区列也不是表中的一个实际的字段,而是一个或者多个伪列。意思是说在表的数据文件中实际上并不保存分...

Zero零_度
2016/07/07
59
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部