码迷,mamicode.com
首页 > 其他好文 > 详细

脚本实现增删查改

时间:2018-05-21 12:21:18      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:.class   删除   fun   html   function   button   jquery   his   utf-8   

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="res/js/jquery.min.js"></script>
</head>
<body>
<script>

$(function () {

$("#tianjia").click(function () {
var tr = $("<tr><td><input type=\"checkbox\" id=\"duoxuan\" name=\"1\"></td><td class=\"class1\"> " + $("#input1").val() + "</td><td class=\"class2\"> " + $("#input2").val() + " </td><td class=\"class3\">" + $("#input3").val() + " </td> <td><button class=\"xiugai\">修改</button><button class=\"del\">删除</button></td></tr>");

$("#biaoge").append(tr);

tr.find(".del").on(‘click‘, function () {
tr.remove();
});
var a = $("#input1").val();
var b = $("#input2").val();
var c = $("#input3").val();
$("#biaoge").find(".xiugai").on(‘click‘, function () {
var athis = $(this).parent().parent();
$("#input1").val(athis.find(".class1").html());
$("#input2").val(athis.find(".class2").html());
$("#input3").val(athis.find(".class3").html());
$("#save").on(‘click‘, function () {
var d = $("#input1").val();
var e = $("#input2").val();
var cf = $("#input3").val();
athis.find(".class1").html(d);
athis.find(".class2").html(e);
athis.find(".class3").html(cf);
})
});

})
$("#input1").on(‘input‘, function () {
var d = $("#input1").val();
var e = $("#input2").val();
var cf = d * e;
$("#input3").val(cf);
});
$("#input2").on(‘input‘, function () {
var d = $("#input1").val();
var e = $("#input2").val();
var cf = d * e;
$("#input3").val(cf);
});
})

</script>
<button id="tianjia">添加</button>
<table id="biaoge">
<tr id="hang1">
<td>
</td>
<td>
单价
</td>
<td>
数量
</td>
<td>
总价
</td>

</tr>
<tr id="hang2">
<td>
<input type="checkbox" id="duoxuan" name="1" value="车">
</td>
<td class="1">
1
</td>
<td class="1">
2
</td>
<td class="1">
3
</td>
<td><button id="i" class="xiugai">修改</button></td>
</tr>
</table>
<form>
<input type="text" id="input1" /><input type="text" id="input2" /><input type="text" id="input3" /><button type="button" id="save">保存</button>
</form>
</body>
</html>

 

脚本实现增删查改

标签:.class   删除   fun   html   function   button   jquery   his   utf-8   

原文地址:https://www.cnblogs.com/liangliping/p/9066102.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!