Home > Article > Web Front-end > jQuery creates editable tables (with code)

jQuery creates editable tables (with code)

php中世界最好的语言Original: 2018-04-25 10:20:031376browse

This time I will bring you jQuery to create editable tables (with code). What are the precautions for jQuery to create editable tables? Here are practical cases, let’s take a look.

<%@ 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 code:

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 code

$(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); 
} 
}); 
}); 
});

Summary: Knowledge points that can be obtained through the study of this example:
1. HTML aspect
1. The table can contain thead and tbody
2. The content of the table header can be placed in th
3.table{} This writing method is called tag selector , which can select the entire table Make an impact.
4.table td{} represents all tds contained in the table.
2. In terms of jquery
$() can put 4 different parameters in the brackets
1. Put the parameter directly into function, which means that the page is loaded: For example, line 1 in the jquery code in the above example$ (function(){})
2. The parameter can be a css class selector and is packaged into a jquery object. For example: Line 4 of the jquery code in the above example $("tbody tr:even")
3. If the parameter is HTML text, you can create a dom node and package it into a jquery object. For example: Line 27 of the jquery code in the above example $("")
4. The parameter can be a dom object. This method is equivalent to replacing the dom object with a jquery object. . Line 11 of the jquery code in the above example var tdObj = $(this)
jquery object in this example
1. Add css attributes after the jquery object to set the css attributes of the node. For example, line 4 in the jquery code in the above example $("tbody tr:even").css("background-color", "#ece9d8");
2. The jquery object content contains the selector corresponding DOM node, saved as an array.
3. Adding the html method after the jquery object can set or get the html content of the node. For example, line 17 of the jquery code in the above example var text = tdObj.html()
4. Add the val method after the jquery object to get or set the value of the node. For example, in the above example, line 41 of the jquery code var inputtext = $(this).val()
5. Adding the width method after the jquery object can set or get the width of a node. For example, line 27 tdObj.width() in the jquery code in the above example
6. Adding the appendTo method after the jquery object can append a node to all the child nodes of another node. For example, in the above example, line 27 appendTo(tdObj) in the jquery code
7. Adding the trigger method after the jquery object can trigger a js event to occur. For example, in the above example, line 29 of the jquery code inputObj.trigger("focus").trigger("select")
8. Adding the children method after the jquery object can obtain the child nodes of a node, and parameters can be set to limit The content of the child node. For example, line 13 of the jquery code in the above example tdObj.children("input").length
9. If the jquery object returned by the selector contains multiple dom nodes, register a similar click event on this object, all dom Nodes will be used for this event. For example, in the above example, line 9 numId.click in the jquery code;

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

jQuery creates editable tables (with code)

Related articles