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