jquery表单添加表格数据

作者：wanglinuo521 字体：[增加减小] 来源：互联网

wanglinuo521通过本文主要向大家介绍了jquery表单添加表格数据等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

您可能想查找下面的文章:

最近更新的内容

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-1.11.0.min.js"></script>
	<script>
	$(function() {
	// $(".btn_del").on('click', function() {
	// alert("123");
	// })
	$(document).on('click', '.btn_del', function() {
	$(this).parent().parent().remove()
	var tr = $("tr");
	if(tr.length == 1) {
	$(".table").hide()
	}
	})

	})
	</script>
	<style>
	.table {
	width: 700px;
	}

	.table tr th {
	text-align: center;
	color: red;
	background-color: yellow;
	}

	.table td {
	border: 1px solid black;
	text-align: center;
	width: 140px;
	}
	</style>
	</head>

	<body>
	<hr /> 用户
	<input type="text" class="user" id="user" />密码<input type="password" class="pwd" id="pwd" /> 邮箱
	<input type="text" class="eml" id="eml" /><input type="button" id="btn" value="添加" />
	<input type="button" value="批量删除" id="ip_del" />
	<hr />
	<table class="table" cellpadding="0px" cellspacing="0px">
	<tr id="tr">
	<th><input type="checkbox" id="cb_one" class="cb_one" /></th>
	<th>用户名</th>
	<th>密码</th>
	<th>邮箱</th>
	<th>操作</th>
	</tr>
	</table>
	<script>
	$(".table").hide();
	$("#btn").click(function() {
	$(".table").show();
	var user = $("#user").val();
	var pwd = $("#pwd").val();
	var eml = $("#eml").val();
	var $tr = $("<tr><td><input type='checkbox' class='cb_ins'/></td><td>" + user + "</td><td>" + pwd + "</td><td>" + eml + "</td><td><button class='btn_del'>删除</button></td></tr>")
	$(".table").append($tr);
	/*$(".btn_del").on('click', function() {
	$(this).parent().parent().remove()
	})*/
	})
	var flag = true;
	$("#cb_one").click(function() {
	var aa = $("input[type=checkbox]")
	for(i = 0; i < aa.length; i++) {
	aa[i].checked = flag;
	}
	flag = !flag;
	})
	$("#ip_del").click(function() {
	var $tr = $("input[type=checkbox]:checked");
	if($tr.length == 0) {
	alert("至少选一行")
	}
	for(i = 0; i < $tr.length; i++) {
	if(i == 0) {
	var td = $($tr[i])
	var aa = td.parent().parent();
	if(aa.attr("id") != "tr") {
	alert(aa)
	td.parent().parent().remove();
	}
	} else {
	$tr[i].parentNode.parentNode.remove();
	}

	}
	var $tr = $("input[type=checkbox]");
	if($tr.length == 1) {
	$(".table").hide();
	}
	})

jquery表单添加表格数据

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容