JavaWebのJQuery(Day 03)DOM増削除と応用
dom追加削除
2つのドロップダウンリストを左から右から左へ
動的な行レコードの追加と削除(カプセル化方法の最適化)イベント応答関数のthisオブジェクトは、現在の応答イベントのdomオブジェクト である.$コア関数で作成されたJqueryのオブジェクトによって呼び出されるfind()メソッド:指定した式に一致するすべての要素を検索します.この関数は処理中の要素の子孫要素を見つける良い方法です. ハイパーリンクラベルのクリックイベントをバインドした後、削除する要素を検索します$(this).parent().parent()は例ではtrタグであり、1つのデータのすべての値が含まれており、removeの前にconfirm()プロンプトで削除を確認するかどうかを示す(ifが成立すれば削除する)、削除するjqueryオブジェクト呼び出しfind()メソッドで削除する1つのデータのいずれかの値を検索し、ユーザプロンプト情報 を与えることができる.
<script type="text/javascript" src="script/jquery-1.7.2.js">script>
<script>
$(function () {
$("appendTo "
).appendTo("form");
$("prepend "
).prependTo("form");
});
script>
head>
<body>
<form action="" method="post">
？<input type="checkbox" id="checkedAllBox"> /
<br>
<input type="checkbox" name="items" value=" ">
<input type="checkbox" name="items" value=" ">
<input type="checkbox" name="items" value=" ">
<input type="checkbox" name="items" value=" ">
<br>
<input type="button" id="checkedAllBtn" value=" ">
<input type="button" id="checkedNoBtn" value=" ">
<input type="button" id="checkedRevBtn" value=" ">
<input type="button" id="sendBtn" value=" ">
form>
<div>1div>
body>
2つのドロップダウンリストを左から右から左へ
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
style>
<script type="text/javascript" src="script/jquery-1.7.2.js">script>
<script type="text/javascript">
//
$(function () {
$("#btn1").click(function () {
$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
});
$("#btn2").click(function () {
$("select:eq(0) option").appendTo($("select:eq(1)"));
});
//
$("button:eq(2)").click(function () {
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
});
$("button:eq(3)").click(function () {
$("select:eq(1) option").appendTo($("select:eq(0)"));
});
});
script>
head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01"> 1option>
<option value="opt02"> 2option>
<option value="opt03"> 3option>
<option value="opt04"> 4option>
<option value="opt05"> 5option>
<option value="opt06"> 6option>
<option value="opt07"> 7option>
<option value="opt08"> 8option>
select>
<button id="btn1"> button>
<button id="btn2"> button>
div>
<div id="rigth">
<select multiple="multiple" name="sel02">
select>
<button> button>
<button> button>
div>
body>
動的な行レコードの追加と削除(カプセル化方法の最適化)
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="script/jquery-1.7.2.js">script>
<script type="text/javascript">
$(function () {
// id addEmp
$("#addEmp").click(function () {
/* */
var deleteFun = function () {
//
var $deleteObj = $(this).parent().parent(); // this dom
var text = $deleteObj.find("th:first").text();
if( confirm(" ["+ text +"] ？") ){
$deleteObj.remove();
}
return false; //
}
var $empName = $("#empName").val(); // input
var $empEmail = $("#empEmail").val();
var $empSalary = $("#empSalary").val();
var $trObj = $("" +
"" + $empName + "" +
"" + $empEmail + "" +
"" + $empSalary + "" +
"Delete" +
"");
$trObj.appendTo("#employeeTable"); // id employeeTable
// 。 。
$trObj.find("a").click(deleteFun); // a
});
// 3 ， ，
$("a").click(function () {
//
var $deleteObj = $(this).parent().parent(); // this dom
var text = $deleteObj.find("th:first").text();
if( confirm(" ["+ text +"] ？") ){
$deleteObj.remove();
}
return false; //
});
});
script>
head>
<body>
<table id="employeeTable">
<tr>
<th> th>
<th> th>
<th> th>
<th> th>
tr>
<tr>
<th> th>
<th>[email protected]th>
<th>15wth>
<th><a href="deleteEmp?id=001">Deletea>th>
tr>
<tr>
<th> th>
<th>[email protected]th>
<th>16wth>
<th><a href="deleteEmp?id=002">Deletea>th>
tr>
<tr>
<th> th>
<th>[email protected]th>
<th>17wth>
<th><a href="deleteEmp?id=003">Deletea>th>
tr>
table>
<div id="formDiv">
<h3> h3>
<table>
<tr>
<th > :th>
<th >
<input type="text" id="empName" name="empName">
th>
tr>
<tr>
<th > :th>
<th >
<input type="text" id="empEmail">
th>
tr>
<tr>
<th > :th>
<th >
<input type="text" id="empSalary">
th>
tr>
<tr>
<th colspan="2" align="center">
<button id="addEmp"> button>
th>
tr>
table>
div>
body>