<!DOCTYPE html> |
<html lang= "en" > |
<head> |
<meta charset= "UTF-8" > |
<title></title> |
<link rel= "stylesheet" href= "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" > |
<script src= "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script> |
<script src= "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" ></script> |
<style> |
*{ |
margin: 30px; |
} |
</style> |
</head> |
<body> |
<table width= "40%" border= "1" id= "tb" style= " border-collapse: collapse;border:1px dotted blue;font-size:14px; " > |
<tr> |
<td>一个萝卜一个坑,<br>一个美女一个配,</td> |
<td>一个萝卜一个坑,<br>一个美女一个配,</td> |
<td>一个萝卜一个坑,<br>一个美女一个配,</td> |
</tr> |
<tr> |
<td>一个萝卜一个坑,<br>一个美女一个配,</td> |
<td>一个萝卜一个坑,<br>一个美女一个配,</td> |
<td>一个萝卜一个坑,<br>一个美女一个配,</td> |
</tr> |
<tr> |
<td>一个萝卜一个坑,<br>一个美女一个配,</td> |
<td>一个萝卜一个坑,<br>一个美女一个配,</td> |
<td>一个萝卜一个坑,<br>一个美女一个配,</td> |
</tr> |
</table> |
<p> |
<br> |
<script> |
function delrow(){ //删除行 |
var i=tb.rows.length; |
tb.deleteRow(i-1); |
} |
function addrow(){ //添加行 |
var tr = document.createElement( 'tr' ); |
var cellsNum = tb.rows[0].cells.length; |
for ( var j = 0 ; j < cellsNum ; j++){ |
var td = document.createElement( 'td' ); |
td.innerHTML= 'add' + '<br />' + 'new' ; |
tr.appendChild(td); |
} |
tb.tBodies[0].appendChild(tr); |
} |
</script> |
<button type= "button" class= "btn btn-success" onClick= "delrow();" >删除行</button> |
<button type= "button" class= "btn btn-info" onClick= "addrow();" >添加行</button> |
</body> |
</html> |