ホームページ > 記事 > ウェブフロントエンド > jQuery は編集可能なテーブルを作成します (コード付き)
jQuery は編集可能なテーブルを作成します (コード付き)
- php中世界最好的语言オリジナル
- 2018-04-25 10:20:031377ブラウズ
今回は、編集可能なテーブルを作成するための 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='text'>").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 に関する他の関連記事に注目してください。中国語のサイトです！
JSON.parse() と JSON.stringify() の違いとその使用方法の詳細な説明
JS で JSON.stringify を実装する手順の詳細な説明
以上がjQuery は編集可能なテーブルを作成します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。