Javascript-Methode zum Implementieren von Fähigkeiten zum Hinzufügen, Löschen, Ändern und Abfragen von Informationen-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Javascript-Methode zum Implementieren von Fähigkeiten zum Hinzufügen, Löschen, Ändern und Abfragen von Informationen

May 16, 2016 pm 03:49 PM

javascript 信息增删改查

Das Beispiel in diesem Artikel beschreibt die Methode zum Hinzufügen, Löschen, Ändern und Überprüfen von Informationen mithilfe von JavaScript. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

&lt;body&gt;
&lt;div align="center"&gt;
 &lt;h1&gt;显示所有的用户界面&lt;/h1&gt;
 &lt;div style="border: 1px red solid; margin-bottom: 100px; padding: 10px 10%;"&gt;
 &lt;table border="1px" cellpadding="0" cellspacing="0" id="tusers"&gt;
 &lt;thead&gt;
 &lt;tr&gt;&lt;th&gt;&lt;input type="checkbox" name="chbk" id="chbk1" onclick="selectAll()"/&gt;&lt;/th&gt;
 &lt;th&gt;名称&lt;/th&gt;
  &lt;th&gt;性别&lt;/th&gt;
  &lt;th&gt;邮箱&lt;/th&gt;
   &lt;th&gt;出生日期&lt;/th&gt;
   &lt;th&gt;操作&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody id="users"&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;div id="pages"&gt;&lt;/div&gt; 
 &lt;/div&gt; 
 &lt;div style="border: 1px blue solid;"&gt;
  &lt;form action=""&gt;
  &lt;table id="divs"&gt;
  &lt;tbody id="addUsers"&gt;
  &lt;tr&gt;
  &lt;td&gt;用户名:&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="name" id="name"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;性别:&lt;/td&gt;
  &lt;td&gt;&lt;select id="sex"&gt;
  &lt;option value="男"&gt;男&lt;/option&gt;
  &lt;option value="女"&gt;女&lt;/option&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;邮箱&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="email" id="email"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;出生日期:&lt;/td&gt;
  &lt;td&gt;
  &lt;input type="text" id="bir" name="bir"/&gt;
  &lt;input type=button value="添加日期" onclick="showCalender(this,document.all.bir)"/&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="addu"&gt;
  &lt;td colspan="2"&gt;&lt;input type="button" value="添加" onclick="addUser()" id="add"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="addu1"&gt;
  &lt;td colspan="2"&gt;&lt;input type="button" value="修改" id="upduser" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/form&gt; 
 &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;script&gt;
window.onload = function(){
alert("onload");
document.getElementById("addu1").style.display = "none";
}
function selectAll(){
var users = document.getElementById("users");
var ips = users.getElementsByTagName("input");
var chbk = document.getElementById("chbk1");
for(var i=0;i&lt;ips.length;i++){
ips[i].setAttribute("checked",chbk.getAttribute("checked"));
}
}
function addUser(){
alert("add");
var name = document.getElementById("name").Value;
var sex = document.getElementById("sex").Value;
var email = document.getElementById("email").Value;
var bir = document.getElementById("bir").Value;
var tusers = document.getElementById("tusers").Value;
var tr1 = document.createElement("tr");
var cbk = document.createElement("td");
var tname = document.createElement("td");
var tsex = document.createElement("td");
var temail = document.createElement("td");
var tbir = document.createElement("td");
var toper = document.createElement("td");
var cbk1 = document.createElement("input");
cbk1.setAttribute("type","checkbox");
cbk1.setAttribute("name","chbk");
cbk.appendChild(cbk1);
tname.appendChild(document.createTextNode(name));
tsex.appendChild(document.createTextNode(sex));
temail.appendChild(document.createTextNode(email));
tbir.appendChild(document.createTextNode(bir));
var adelete = document.createElement("a");
var aupdate = document.createElement("a");
adelete.setAttribute("href","#");
aupdate.setAttribute("href","#");
adelete.appendChild(document.createTextNode("删除|"));
aupdate.appendChild(document.createTextNode("修改"));
toper.appendChild(adelete);
toper.appendChild(aupdate);
tr1.appendChild(cbk);
tr1.appendChild(tname);
tr1.appendChild(tsex);
tr1.appendChild(temail);
tr1.appendChild(tbir);
tr1.appendChild(toper);
var users = document.getElementById("users");
users.appendChild(tr1);
tusers.appendChild(users);
adelete.onclick = function(){
users.removeChild(adelete.parentNode.parentNode);
}
aupdate.onclick function(){
document.getElementById(addu).style.display = "none";
document.getElementById(addu1).style.display = "block";
var utr = aupdate.parentNode.parentNode;
var utrs = utr.childNodes;
document.getElementById("name").value = utrs[1].innerHTML;
document.getElementById("sex").value = utrs[2].innerHTML;
document.getElementById("email").value = utrs[3].innerHTML;
document.getElementById("bir").value = utrs[4].innerHTML;
var upUser = document.getElementById("upduser");
upUser.onclick = function(){
utr.childNodes[1].innerHTML = document.getElementById("name").value;
utr.childNodes[2].innerHTML = document.getElementById("sex").value;
utr.childNodes[3].innerHTML = document.getElementById("email").value;
utr.childNodes[4].innerHTML = document.getElementById("bir").value;
document.getElementById("addu1").style.display = "none";
document.getElementById("addu").style.display = "block";
}
}
testPage()
}
var indexPage = document.createElement("a");
var upPage = document.createElement("a");
var downPage = document.createElement("a");
var endPage = document.createElement("a");
var nowpage = 1;
function testPage(){
var tbodyUsers = document.getElementById("users");
var trUsers = document.getElementById("tr");
var countRecord = trUsers.length;
var PAGESIZE = 2;
var countPage = (countRecord%PAGESIZE ==0&#63;countRecord/PAGESIZE:Math.ceil(countRecord/PAGESIZE));
var pages=document.getElementById("pages");
if(!pages.hasChildNodes()){
getPages(nowpage);
}
index.onclik=function(){
noepage=1;
indexPageInfo(countRecord,trUsers);
}
upPage.onclick=function(){
if(nowpage-1&gt;1){
nowpage-=1;
}else{
nowpage=1;
indexPageInfo(countRecord,trUsers);
}
var startindex =(nowpage-1)*PAGESIZE;
var endindex=startindex+PAGESIZE;
PageInfo(startindex,endindex,countRecord,trUsers);
}
downPage.onclick=function(){
if(nowpage+1&gt;=countPage){
nowpage=countPage;
}else{
nowpage=+1;
}
var startindex =(nowpage-1)*PAGESIZE;
var endindex=startindex+PAGESIZE;
PageInfo(startindex,endindex,countRecord,trUsers);
}
endPage.onclick=function(){
if(nowpage&gt;1){
var startindex =(nowpage-1)*PAGESIZE;
for(var i=0;i&lt;countRecord;i++){
if(i&lt;startindex){
trUsers[i].style.display="none";
}else{
trUsers[i].style.display="block";
}
}
}else{
indexPageInfo(countRecord,trUsers);
}
}
}
function indexPageInfo(countRecord, trUsers) {
if (countRecord &lt;= 2) {
for ( var i = 0; i &lt; PAGESIZE; i++) {
trUsers[i].style.display = "block";
}
} else {
for ( var i = 2; i &lt; countRecord; i++) {
trUsers[i].style.display = "none";
}
}
}
function PageInfo(startindex, endindex, countRecord, trUsers) {
for ( var i = 0; i &lt; countRecord; i++) {
if (i &gt;= startindex && i &lt; endindex) {
trUsers[i].style.display = "block";
} else {
trUsers[i].style.display = "none";
}
}
}
function getPages(numpage) {
indexPage.appendChild(document.createTextNode("首页"));
indexPage.setAttribute("href", "#");
upPage.appendChild(document.createTextNode("上一页"));
upPage.setAttribute("href", "#");
downPage.appendChild(document.createTextNode("下一页"));
downPage.setAttribute("href", "#");
endPage.appendChild(document.createTextNode("末页"));
endPage.setAttribute("href", "#");
var pages = document.getElementById("pages");
pages.appendChild(indexPage);
pages.appendChild(upPage);
pages.appendChild(downPage);
pages.appendChild(endPage);
}
&lt;/script&gt;

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn