只需要创建一个表格，id为videos，react就能将这个表格转换成视频列表，并点击自动播放

index.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

        <title>react将表格动态生成视频列表</title>

        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

        <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

        <script src="http://211.140.7.173:8081/t/wuhairui/cnblogs/babel.min.js"></script>

        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    </head>

    <body>

        <div id="cnblogs_post_body"><table id="videos" style="height: 144px; width: 959px;" border="0">

        <tbody>

        <tr>

            <td>http://mgcdn.migucloud.com/vi0/333/1b/V0kGzvN3kWxqHKk95m/1bV0kGzvN3kWxqHKk95m.mp4</td>

            <td>第1集</td>

        </tr>

        <tr>

            <td>http://mgcdn.migucloud.com/vi0/333/2D/LsfgmnN0yrpsivlxiQh/2DLsfgmnN0yrpsivlxiQh.mp4</td>

            <td>第2集</td>

        </tr>

        <tr>

            <td>http://mgcdn.migucloud.com/vi0/333/2V/sJZ5f1fTbWm75aNGEYD/2VsJZ5f1fTbWm75aNGEYD.mp4</td>

            <td>第3集</td>

        </tr>

        </tbody>

        </table>

        </div>

        <script type="text/babel" src="index.jsx"></script>

    </body>

</html>

index.jsx

var VideoButton = React.createClass({

    getInitialState: function() {

        var videosObj=$("#cnblogs_post_body table#videos");

        var videos=[];

        videosObj.find("tr").each(function(){

            var url=$(this).find("td").eq(0).text();

            var title=$(this).find("td").eq(1).text();

            var videoobj={"url":url,"title":title};

            videos.push(videoobj);

        });

        return {videos:videos,dqurl:videos[0].url,dqtitle:""};

    },

    buttonClick: function(url,title,e){

        this.setState({dqurl:url,dqtitle:title});

        var dqele=e.target;//当前dom节点

    },

    componentDidMount:function(){//第一次渲染完毕后调用

        var player=this.refs.player;

        $(player).find("video")[0].play();

    },

    componentDidUpdate:function(){//更新render后调用

        var player=this.refs.player;

        $(player).find("video")[0].play();

    },

    render: function() {

        var width=document.body.clientWidth;

        var height=width*3/4;

        var _this=this;

        var videos=this.state.videos;

        return (

            <div>

                {

                    videos.map(function(v,i){

                        return (

                            <strong onClick={_this.buttonClick.bind(this,v.url,v.title)}>

                                <a>{v.title}</a>&nbsp;

                            </strong>

                        );

                    })

                }

                <div ref="player">

                    <video controls="controls" src={this.state.dqurl} width="320" height="240"></video>

                </div>

            </div>

        );

    }

});

  ReactDOM.render(

    <VideoButton />,

    document.getElementById("videos")
);

如下，将一个表格转换成一个视频列表（多行2列的表格，第一列为视频url，第二列为视频标题）：

http://mgcdn.migucloud.com/vi0/333/3B/9taeJVeUof4po3bLIV/3B9taeJVeUof4po3bLIV.mp4 数码宝贝第五部 01
http://mgcdn.migucloud.com/vi0/333/3K/fY03CiVcToJTGDodKGox/3KfY03CiVcToJTGDodKGox.mp4 数码宝贝第五部 02

react将表格动态生成视频列表【代码】【案例】的更多相关文章

  1. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  2. Delphi 如何在程序中执行动态生成的Delphi代码

    如何在程序中执行动态生成的Delphi代码 经常发现有人提这类问题,或者提问内容最后归结成这种问题 前些阵子有位高手写了一个“执行动态生成的代码”,这是真正的高手,我没那种功力,我只会投机取巧. 这里 ...

  3. 如何在程序中执行动态生成的Delphi代码

    如何在程序中执行动态生成的Delphi代码 经常发现有人提这类问题,或者提问内容最后归结成这种问题 前些阵子有位高手写了一个“执行动态生成的代码”,这是真正的高手,我没那种功力,我只会投机取巧. 这里 ...

  4. winform WebBrowser控件中，cs后台代码执行动态生成的js

    很多文章都是好介绍C# 后台cs和js如何交互,cs调用js方法(js方法必须是页面上存在的,已经定义好的),js调用cs方法, 但如果想用cs里面执行动态生成的js代码,如何实现呢? 思路大致是这样 ...

  5. VUE动态生成table表格（element-ui）(新增/删除)

    (直接复制即可测试) 结构(红色部分 data/prop/v-model 数据绑定): <template> <el-table size="small" :da ...

  6. cglib根据数据动态生成对象

    最近有个任务:根据查询SQL直接导出报表 实现关键是,怎么根据sql查询的数据动态生成对象列表,想到Cglib动态代理实现 废话少说,上代码: 定义动态生成Java Bean类: import jav ...

  7. 动态生成CheckBox（Winform程序）

    在做用户权限设置功能时,需要做一个动态生成权限列表的功能.(笔记.分享) //1.清空权限控件组的默认控件 panelPermissions.Controls.Clear(); _groupBoxLi ...

  8. Knockout结合Bootstrap创建动态UI--产品列表管理

    本篇文章结合Bootstrap创建一个比较完整的应用,对产品列表进行管理,包括产品的增加.删除.修改. 需要的引用 <script type='text/javascript' src='htt ...

  9. jquery给动态生成的元素绑定事件，on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

随机推荐

  1. Dell服务器Raid5之后安装系统

    在做raid之后,安装系统.竟然安装不成功! 百度之后,发现第一启动项是raid的硬盘,不是我本机的ssd. 报错如下: 启动机器F2—boot setting 如果引导模式是UEFI 换成了bios ...

  2. NN中BP推导及w不能初始化为0

    转自:为什么w不能初始化为0,而是要随机初始化?https://zhuanlan.zhihu.com/p/27190255 通俗理解BP.https://zhuanlan.zhihu.com/p/24 ...

  3. MSSqlServer 发布/订阅配置（主从同步）

    背景: 1.单个独立数据库的吞吐量是有瓶颈的,那么如何解决这个瓶颈? 2.服务器直接数据如何复制.并具备一致性.可扩展性? 资源: 官方资源:https://technet.microsoft.com ...

  4. idc函数大全

    A80_addcA80_addcixA80_addciyA80_addixA80_addiyA80_cmpdA80_cmpiA80_im0A80_im1A80_im2A80_jrcA80_jrncA8 ...

  5. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  6. pyqt常用窗口组件

    扩展知识: 熟悉常用的窗口组件: 1 按钮类 QPushButton   普通按钮 QToolButton   工具按钮:通常在工具栏使用 QRadioButton   单选框 QCheckBox   ...

  7. Java之.jdk安装-Windows

    jdk安装-windows 1. window + r,然后输入:cmd,打开黑窗口. 2. 分别输入 java -version .javac -version,检查jdk版本信息. 如果javac ...

  8. c# 集合中有数字、字符的Orderby排序

    string[] things= new string[] { "105", "101", "102", "103", ...

  9. jdk8新特性-亮瞎眼的lambda表达式

    jdk8之前,尤其是在写GUI程序的事件监听的时候,各种的匿名内部类,大把大把拖沓的代码,程序毫无美感可言!既然Java中一切皆为对象,那么,就类似于某些动态语言一样,函数也可以当成是对象啊!代码块也 ...

  10. Rpgmakermv（33） Mog_PictureGallery

    ============================================================================= +++ MOG - Picture Gall ...