使用jquery对表格的样式及内容进行更改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<table border='1' cellpadding="0" cellspacing="0" width='400px'>
<tr>
<td>书名</td>
<td>价格</td>
</tr>
<tr>
<td>看得见风景的房间</td>
<td>60个瞬间</td>
</tr>
<tr>
<td>¥ 30</td>
<td>¥ 32</td>
</tr>
</table>
<button type="button">增加一行</button>
<button type="button">删除第行2行</button>
<button type="button">修改标题样式</button>
<button type="button">复制最后行行</button>
<script>
$(function () {
$("button").eq(0).click(function () {
$('<tr><td>¥ 30</td><td>¥ 32</td></tr>').appendTo($('table'));
});
$("button").eq(1).click(function () {
$("table tr").eq(1).remove();
});
$("button").eq(2).click(function () {
$("table tr").eq(0).css({
'color':'red',
'font-size':'20px'
});
});
$("button").eq(3).click(function () {
console.info($('table tr:last').clone());
$('table tr:last').clone().appendTo('table');
});
});
</script>
</body>
</html>