jquery 动态添加表格行

jquery 动态添加表格行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在此处插入标题</title>
<style>
tr {
background-color: white;
font-size: 12px;
height: 30px;
} td {
text-align: center
}
</style>
<script language='javascript' src='../jQuery/jquery.js'></script>
<script>
$().ready(function() {
$('#btnOk').bind('click', function() { //取出三个文本框的值
var name = $('#name').val();
var price = $("#price").val();
var address = $("#address").val(); //从表头中复制一行插入到表格的内容的最后
$('#result').append($('#result tr:first').clone()); //选中表格中最后一行中的某个td,改变它的内容
$('#result tr:last td:eq(0)').html(name);
$('#result tr:last td:eq(1)').html(price);
$('#result tr:last td:eq(2)').html(address); });
});
</script>
</head>
<body>
<table id='result' width=800 cellspacing="1" bgcolor='#6699cc'>
<tr>
<td>商品</td>
<td>价格</td>
<td>产地</td>
</tr> </table>
<hr>
<input type='text' id='name' />
<hr>
<input type='text' id='price' />
<hr>
<input type='text' id='address' />
<hr>
<input type='button' id='btnOk' value='确定' />
</body>
</html>
上一篇:微信小程序-两个input叠加,多次点击字体变粗或闪动


下一篇:[Git] MAC上Git初探