<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<div id="root">
<!-- render here -->
</div>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<!-- babel 5.8.24 -->
<script src="browser.js"></script>
<script type="text/babel" >
const numbers = [1, 2, 3, 4, 5];
const tableRow=null
class MyTable extends React.Component{
constructor(props){
super(props)
this.state={
tableRow:null,
tableCol:null
}
this._setTable=this.setTable.bind(this)
}
setTable(){
var trow=document.getElementById("row").value
var tcol=document.getElementById("col").value
console.log("row:"+trow)
console.log("col:"+tcol)
//ary init
var colNum=[tcol]
for(var i=0;i<tcol;i++){
colNum[i]=i
}
//ary init
var rowNum=[trow]
for(var i=0;i<trow;i++){
rowNum[i]=i
}
const tableCol = colNum.map((idx)=>
<th key={idx.toString()}>title:{idx}</th>
);
const cell = colNum.map((idx)=>
<td key={idx.toString()}>new cell</td>
);
const tableRow = rowNum.map((idx) =>
<tr key={idx.toString()}>
{cell}
</tr>
);
this.setState({
tableRow:tableRow,
tableCol:tableCol
})
}
render(){
return(
<div>
<table>
<thead>
<tr>
{this.state.tableCol}
</tr>
</thead>
<tbody>
{this.state.tableRow}
</tbody>
</table>
<form>
<label>
col:
<input type="text" name="col" id="col" />
row:
<input type="text" name="row" id="row" />
</label>
<input type="button" value="set" onClick={this._setTable} />
</form>
</div>
)
}
}
ReactDOM.render(
<MyTable />,
document.getElementById('root')
);
</script>
</body>
</html>
原始檔案下載