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>
</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将表格动态生成视频列表【代码】【案例】的更多相关文章
- js动态生成数据列表
我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...
- Delphi 如何在程序中执行动态生成的Delphi代码
如何在程序中执行动态生成的Delphi代码 经常发现有人提这类问题,或者提问内容最后归结成这种问题 前些阵子有位高手写了一个“执行动态生成的代码”,这是真正的高手,我没那种功力,我只会投机取巧. 这里 ...
- 如何在程序中执行动态生成的Delphi代码
如何在程序中执行动态生成的Delphi代码 经常发现有人提这类问题,或者提问内容最后归结成这种问题 前些阵子有位高手写了一个“执行动态生成的代码”,这是真正的高手,我没那种功力,我只会投机取巧. 这里 ...
- winform WebBrowser控件中，cs后台代码执行动态生成的js
很多文章都是好介绍C# 后台cs和js如何交互,cs调用js方法(js方法必须是页面上存在的,已经定义好的),js调用cs方法, 但如果想用cs里面执行动态生成的js代码,如何实现呢? 思路大致是这样 ...
- VUE动态生成table表格（element-ui）(新增/删除)
(直接复制即可测试) 结构(红色部分 data/prop/v-model 数据绑定): <template> <el-table size="small" :da ...
- cglib根据数据动态生成对象
最近有个任务:根据查询SQL直接导出报表 实现关键是,怎么根据sql查询的数据动态生成对象列表,想到Cglib动态代理实现 废话少说,上代码: 定义动态生成Java Bean类: import jav ...
- 动态生成CheckBox（Winform程序）
在做用户权限设置功能时,需要做一个动态生成权限列表的功能.(笔记.分享) //1.清空权限控件组的默认控件 panelPermissions.Controls.Clear(); _groupBoxLi ...
- Knockout结合Bootstrap创建动态UI--产品列表管理
本篇文章结合Bootstrap创建一个比较完整的应用,对产品列表进行管理,包括产品的增加.删除.修改. 需要的引用 <script type='text/javascript' src='htt ...
- jquery给动态生成的元素绑定事件，on函数
首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...
随机推荐
- python中的*arg和**kwargs
arg对应多出来的位置参数,把它们解析成tuple;kwargs把关键字参数解析成dict. def example(pram): print(pram) def example2(param, *a ...
- java中Long的比较
Long的比较要用equals而不要用== 当Long为常量且常量值小于一个字节(<=127)时,两个Long指向同一个常量内容: Long userId=127L; Long authorId ...
- 微信小程序：wx.navigateBack页面返回传参
场景(比如:商城选地址,选优惠券): 在[页面A]中调用wx.navigateTo方法跳转到[页面B] 然后从[页面B]返回[页面A], 并将[页面B]中的一些数据传回[页面A] wx.navigat ...
- 阿里云香港主机自动换IP
为什么要写这个脚本原因你懂的,现在都是直接封IP pip3 install aliyun-python-sdk-alidns aliyun-python-sdk-domain aliyun-pytho ...
- SaltStack 数据系统 Grains Pillar
grains 先来一个很好用的命令 # salt '*' grains.items \\基本上输出了所有你想要的信息 192.168.100.138: ---------- SSDs: biosrel ...
- 后续使用dubbo的必要性的思考
要做微服务,要做分布式,就得先解决网络调用即rpc的问题
- 初尝Web API《转》
HTTP 并不是只能用在网页中.它其实还是一个强大的平台,可以用来生成一些API,暴露服务和数据.HTTP很简单灵活,还非常普及.几乎所有你能想到的平台都有HTTP库,所以HTTP服务可以囊括很大范围 ...
- js--script和link中的 integrity 属性
<link crossorigin="anonymous" integrity="sha256-+hDz/gVbhp24mhOmoIT4Du4F3K5fs9fjjo ...
- Mac下android studio卡，居然这么解决了。。。。
一直修改build.app直接卡死.... 最后把网线拨了,居然不卡了.. 直接设置代理为127.0.0.1直接不卡了,无语了...
- cocos2dx 3.x 网络循环接收数据(RakNet::Packet* packet)单步网络接收
void FriendFightLayer::update(float dt) { dealWithPacket(dt); if (m_isNeedSwitchToLobby) { PublicMet ...