jQuery は編集可能なテーブルを作成します (コード付き)-jsチュートリアル-php.cn

jQuery は編集可能なテーブルを作成します (コード付き)

php中世界最好的语言

リリース： 2018-04-25 10:20:03

オリジナル

1334 人が閲覧しました

今回は、編集可能なテーブルを作成するための jQuery について説明します (コード付き)。jQuery で編集可能なテーブルを作成するための注意事項について、実際のケースを見てみましょう。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 
<!DOCTYPE html 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>jq2—可以编辑的表格</title> 
<link href="css/editTable.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/editTable.js"></script> 
<%--<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%> 
</head> 
<body> 
<form id="form1" runat="server"> 
<p> 
<table> 
<thead> 
<tr> 
<th colspan="2">鼠标点击表格项就可以编辑</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>学号</th> 
<th>姓名</th> 
</tr> 
<tr> 
<td>000001</td> 
<td>张三</td> 
</tr> 
<tr> 
<td>000002</td> 
<td>李四</td> 
</tr> 
<tr> 
<td>000003</td> 
<td>王五</td> 
</tr> 
<tr> 
<td>000004</td> 
<td>赵六</td> 
</tr> 
</tbody> 
</table> 
</p> 
</form> 
</body> 
</html>

ログイン後にコピー

css コード:

body { 
} 
table { 
border:1px solid #000000; 
border-collapse:collapse;/*单元格边框合并*/ 
width:400px; 
} 
table td { 
border:1px solid #000000; 
width:50%; 
} 
table th { 
border:1px solid #000000; 
width:50%; 
} 
tbody th { 
background-color:#426fae; 
}

ログイン後にコピー

jquery コード

$(function () { 
//找到表格中除了第一个tr以外的所有偶数行 
//使用even为了通过tbody tr返回所有tr元素 
$("tbody tr:even").css("background-color", "#ece9d8"); 
//找到所有的学号单元格 
var numId = $("tbody td:even"); 
//给单元格注册鼠标点击事件 
numId.click(function () { 
//找到对应当前鼠标点击的td，this对应的就是响应了click的那个td 
var tdObj = $(this); 
//判断td中是否有文本框 
if (tdObj.children("input").length>0) { 
return false; 
} 
//获取表格中的内容 
var text = tdObj.html(); 
//清空td中的内容 
tdObj.html(""); 
//创建文本框 
//去掉文本框的边框 
//设置文本框中字体与表格中的文字大小相同。 
//设置文本框的背景颜色与表格的背景颜色一样 
//是文本框的宽度和td的宽度相同 
//并将td中值放入文本框中 
//将文本框插入到td中 
var inputObj = $("<input type=&#39;text&#39;>").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).val(text).appendTo(tdObj); 
//文本框插入后先获得焦点、后选中 
inputObj.trigger("focus").trigger("select") 
//文本框插入后不能被触发单击事件 
inputObj.click(function () { 
return false; 
}); 
//处理文本框上回车和esc按键的操作 
inputObj.keyup(function (event) { 
//获取当前按下键盘的键值 
var keycode = event.which; 
//处理回车的情况 
if (keycode==13) { 
//获取当前文本框中的内容 
var inputtext = $(this).val(); 
//将td中的内容修改为文本框的内容 
tdObj.html(inputtext); 
} 
//处理esc的内容 
if (keycode==27) { 
//将td中的内容还原成原来的内容 
tdObj.html(text); 
} 
}); 
}); 
});

ログイン後にコピー

概要: この例を学習することで得られる知識ポイント:
1. HTML アスペクト
1.table には thead と tbody を含めることができます
2.この書き込みメソッドは
tag selector と呼ばれ、テーブル全体に影響を与える可能性があります。 4.table td{} は、テーブルに含まれるすべての td を表します。
2. jquery
$() に関しては、括弧内に 4 つの異なるパラメーターを入れることができます
1. パラメーターを関数に直接入れて、ページがロードされていることを示します。上の例 $(function(){} )
2. パラメーターは
css クラスセレクターであり、jquery オブジェクトにパッケージ化できます。例: 上記の例の jquery コードの 4 行目 $("tbody tr:even") 3. パラメーターが HTML テキストの場合、dom ノードを作成して jquery オブジェクトにパッケージ化できます。例: 上記の例の jquery コードの 27 行目 $("")
4. パラメーターは dom オブジェクトにすることができます。このメソッドは dom オブジェクトをに置き換えることと同じです。 jQueryオブジェクト。上記の例の jquery コードの 11 行目 var tdObj = $(this)
この例の jquery オブジェクト
1. jquery オブジェクトの後に css 属性を追加して、ノードの css 属性を設定します。たとえば、上記の例の jquery コードの 4 行目 $("tbody tr:even").css("background-color", "#ece9d8");
2 に対応する dom ノードが含まれています。配列として保存されたセレクター。
3. jquery オブジェクトの後に html メソッドを追加すると、ノードの html コンテンツを設定または取得できます。たとえば、上記の例の jquery コードの 17 行目は var text = tdObj.html() です。
4. jquery オブジェクトの後に val メソッドを追加すると、ノードの値を取得または設定できます。たとえば、上記の例では、jquery コードの 41 行目は var inputtext = $(this).val()
5. jquery オブジェクトの後に width メソッドを追加すると、ノードの幅を設定または取得できます。たとえば、上記の例の jquery コードの 27 行目 tdObj.width()
6. jquery オブジェクトの後に appendTo メソッドを追加すると、別のノードのすべての子ノードにノードを追加できます。たとえば、上記の例では、jquery コード
7 の行 27 appendTo(tdObj) で、jquery オブジェクトの後にトリガーメソッドを追加すると、js イベントの発生をトリガーできます。たとえば、上記の例では、jquery コードの 29 行目 inputObj.trigger("focus").trigger("select")
8. jquery オブジェクトの後に Children メソッドを追加すると、特定のノードの子ノードを取得できます。パラメータを設定して子ノードを制限できます。たとえば、上記の例の jquery コードの 13 行目、tdObj.children("input").length
9。セレクターによって返された jquery オブジェクトに複数の dom ノードが含まれている場合は、このオブジェクトに同様のクリックイベントを登録します。すべての dom ノードがこのイベントに対応します。たとえば、上記の例では、jquery コードの 9 行目 numId.click を参照してください。この記事の事例を読んだ後は、この方法を習得できたと思います。さらに興味深い情報については、PHP に関する他の関連記事に注目してください。中国語のサイトです！