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 ><table >
<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=$("#likecs_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 |
- 上一篇 »HTML-知识点总结
- 下一篇 »python使用tablib库生成xls表格