react将表格动态生成视频列表【代码】【案例】

只需要创建一个表格，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

转载于:https://www.cnblogs.com/wuhairui/p/6770717.html

react将表格动态生成视频列表【代码】【案例】相关推荐

js动态生成数据列表
我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...
动态生成的html代码
//=====在网站找到了解决方法=====//动态生成的html代码var htmlCode = '<html><head><title>代码</title ...
html动态生成可输入的表格,动态生成表格.html
动态生成表格 table, thead, tr, th, td{ border: 0; } th { width: auto; } 姓名科目成绩操作 // 使用对象储存的数据,列表 data = [ ...
根据数据和模板动态生成页面+列表的动态渲染
非原创本文转自https://github.com/a415432669/-front_end_notebook/tree/master/Node/day6/%E6%96%87%E6%A1%A3 根 ...
java中动态输入_根据特定输入动态生成字符串的代码 - java
我想根据特定的输入动态生成字符串如果输入= 1,则字符串输出= 00000 如果它= 10,则输出= 0000a 输入= 16,输出= 00010 等等 . 生成的字符串是从0到9的数字和从a到f的 ...
【PHPWord】基于Word模板替换生成输出表格动态生成内容、合并单元格、设置单元格背景颜色
文章目录一.前言二.业务需求三.功能实现 1.处理数据 2.Word模板 3.输出动态数据四.完整代码和模板 1.Word模板 2.完整代码五.总结一.前言在之前的文章中,我们做了直接生 ...
zookeeper实现动态获取服务器列表代码示例（服务上下线监听/动态更新服务列表）
分别上线server01,server02,server03,server04, 客户端程序会获取到服务列表得数量为4,再下线server04, 客户端会获得最新的列表数量为3.
elementui table表格动态生成多级表头
1.实现效果 2.封装table表格组件 test1.vue <template><el-table-column :label="coloumnHeader.label& ...
WebAPI(part10)--动态生成表格
学习笔记,仅供参考,有错必究文章目录动态生成表格动态生成表格从本地取到数据,动态生成表格,并添加删除操作. 代码: <!DOCTYPE html> <html>< ...

react将表格动态生成视频列表【代码】【案例】

react将表格动态生成视频列表【代码】【案例】相关推荐

最新文章

热门文章