1.jQuery 使用append添加元素其中button標簽不會出現(xiàn),點擊按鈕生成了一個tr和兩個td標簽,button標簽不會出現(xiàn).預計的是生成
<tr><td></td><td></td><button></button></tr>
實際效果是只生成了<tr><td></td><td></td></tr>,<button>沒有生成
2.代碼:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>
<p>
<label>城市名稱:<input id="aqi-city-input" type="text"></label><br>
<label>空氣質(zhì)量指數(shù):<input id="aqi-value-input" type="text"></label><br>
<button id="add-btn">確認添加</button>
</p>
<table id="aqi-table">
</table>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#add-btn").click(function () {
var city = $("#aqi-city-input").val().trim() ;
var num = $("#aqi-value-input").val().trim() ;
var regex = /^[\u4e00-\u9fa5a-zA-Z\/\(\)]+$/;
if (!regex.test(city)) {
alert("請輸入中文");
$("#aqi-city-input").val() = "";
$("#aqi-value-input").val() = "";
}else{
if ($("#aqi-table tr").length===0) {
$("#aqi-table").append("<tr><td>城市</td><td>空氣質(zhì)量</td><td>操作</td></tr>");
}
}
//添加數(shù)據(jù)行
$("#aqi-table").append("<tr><td>" + city + "</td><td>" + num + "</td><button>刪除</button></tr>");
$("#aqi-table button").click(function (event) {
event.target.parentNode.remove();
})
})
})
</script>
</body>
</html>
閉關修行中......
一.清val
$("#aqi-city-input").val() = "";
$("#aqi-value-input").val() = "";
==>>
$("#aqi-city-input").val("");
$("#aqi-value-input").val("");
二.綁定事件
$(document).on("click","#aqi-table button", function (event) {
event.target.parentNode.parentNode.remove()
})
三. 添加數(shù)據(jù)行
$("#aqi-table").append("<tr><td>" + city + "</td><td>" + num + "</td><td><button>刪除</button></td></tr>");
$("#aqi-city-input").val() = "";
$("#aqi-value-input").val() = "";
jquery的val()不是這樣用的
而是把值放在val("")中
$("#aqi-table button").click(function(){
//
})
改成
$(document).on('click',"#aqi-table button",function(){
//
})
你需要在你的button外包一層td
$("#aqi-table").append("<tr><td>" + city + "</td><td>" + num + "</td><td><button>刪除</button></td></tr>");