<!doctype html><html lang="en"> <head> ?<meta charset="UTF-8"> ?<title>Document</title> ???<style> ???????#tbl{ ???????????width:600px; ???????????border:1px solid #000; ???????????border-collapse:collapse; ???????} ???????#tbl td{ ???????????border:1px solid #000; ???????} ???</style> ???<script src="jquery-1.11.3.js"></script> ???<script> ???????$(function(){ ???????????//1、为#btnAdd绑定click事件 ???????????$("#btnAdd").click(function(){ ???????????????//1、获取三个文本框的值 ???????????????var gname = $("#gname").val(); ???????????????var gprice = $("#gprice").val(); ???????????????var gcount = $("#gcount").val(); ???????????????//2、构建四个td，分别存放三个值和一个按钮 ???????????????var $tdName=$("<td>"+gname+"</td>"); ???????????????var $tdPrice=$("<td>"+gprice+"</td>") ???????????????var $tdCount=$("<td>"+gcount+"</td>"); ???????????????var $tdOper = $("<td></td>"); ???????????????//2.2 创建删除按钮，并指定行为 ???????????????var $btnDel = $("<button>删除</button>"); ???????????????$btnDel.click(function(event){ ???????????????????//通过 $btnDel 找到 tr，然后再删除 ???????????????????$(event.target).parent().parent().remove(); ???????????????}); ???????????????//2.3 将$btnDel增加到$tdOper中 ???????????????$tdOper.append($btnDel); ???????????????//3、构建一个tr，存放四个td ???????????????var $tr = $("<tr></tr>"); ???????????????$tr.append($tdName); ???????????????$tr.append($tdPrice); ???????????????$tr.append($tdCount); ???????????????$tr.append($tdOper); ???????????????//4、将tr放进tbody中 ???????????????$("#tContent").append($tr); ???????????}); ???????}); ???</script> </head> <body> ?<p> ???????<input type="text" id="gname"> ???????<input type="text" id="gprice"> ???????<input type="text" id="gcount"> ???????<button id="btnAdd">增加</button> ???</p> ???<table id="tbl"> ???????<thead> ???????????<tr> ???????????????<td>商品名称</td> ???????????????<td>商品价格</td> ???????????????<td>购买数量</td> ???????????????<td>操作</td> ???????????</tr> ???????</thead> ???????<tbody id="tContent"></tbody> ???</table> </body></html>jQuery-添加信息栏
原文地址：https://www.cnblogs.com/-hjj/p/9943473.html