Home > Developer > Web Develop
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6<style>7 . hide{8 Display:none;9 }Ten . modal{ One position:fixed; Atop:50%; -left:50%; - width:500px; the height:400px; -Margin-left:-250px; -Margin-top:-250px; -background-color: #eeeeee; +Z-index:10; - } + . shadow{ A position:fixed; attop:0; -left:0; -right:0; -bottom:0; -opacity:0.6; -background-Color:black; inZ-index:9; - } to</style> + -<body> the<a onclick= "addelement (); > Add </a> * $<table border= "1" id= "TB" >Panax Notoginseng<tr> -<TD target= "hostname" >1.1.1.11</td> the<TD target= "Port" >80</td> +<TD target= "IP" >80</td> A<td> the<a class= "Edit" > Edit </a> | <a class= "del" > Delete </a> +</td> -</tr> $<tr> $<TD target= "hostname" >1.1.1.12</td> -<TD target= "Port" >80</td> -<TD target= "IP" >80</td> the<td> -<a class= "Edit" > Edit </a> | <a class= "del" > Delete </a>Wuyi</td> the</tr> -<tr> Wu<TD target= "hostname" >1.1.1.13</td> -<TD target= "Port" >80</td> About<TD target= "IP" >80</td> $<td> -<a class= "Edit" > Edit </a> | <a class= "del" > Delete </a> -</td> -</tr> A<tr> +<TD target= "hostname" >1.1.1.14</td> the<TD target= "Port" >80</td> -<TD target= "IP" >80</td> $<td> the<a class= "Edit" > Edit </a> | <a class= "del" > Delete </a> the</td> the the</tr> -</table> in the<div class= "Modal Hide" > the<div> About<input name= "hostname" type= "text"/> the<input name= "Port" type= "text"/> the<input name= "IP" type= "text"/> the</div> + -<div> the<input type= "button" value= "Cancel" onclick= "Cancelmodal ();"/>Bayi<input type= "button" value= "OK" onclick= "confirmmodal ();"/> the</div> the</div> - -<div class= "Shadow Hide" ></div> the the<script src= "Jquery-1.12.4.js" ></script> the<script> the -$ ('. del '). Click (function () { the$( This). Parent (). Parent (). remove (); the }); the 94 functionConfirmmodal () { the the varTR = document.createelement (' tr ')); the varTD1 = document.createelement (' TD ');98td1.innerhtml = "11.11.11.11"; About varTD2 = document.createelement (' TD '); -td2.innerhtml = "8001";101 102 $ (TR). Append (TD1);103 $ (TR). Append (TD2);104 the$ (' #tb '). Append (tr);106 107$ (". Modal,.shadow"). AddClass (' Hide ');108 //$ ('. Modal input[type= ' text '] '). each (function () {109 ////var temp = "<TD> ..." the //111 // the //113 // }) the } the the functionaddelement () {117$ (". Modal,.shadow"). Removeclass (' Hide ');118 }119 functionCancelmodal () { -$ (". Modal,.shadow"). AddClass (' Hide ');121$ ('. Modal input[type= ' text '] '). Val ("");122 }123 124$ ('. Edit '). Click (function(){ the$ (". Modal,.shadow"). Removeclass (' Hide ');126 //This
the Prevall () method returns all sibling elements before the selected element.
prev ()-Returns the previous sibling element of the selected element
prevuntil ()-Returns all sibling elements before each element between two given arguments
127 varTDS = $ ( This). Parent (). Prevall (); -Tds.each (function () {129 //get the target property value for TD the varn = $ ( This). attr (' target ');131 //get the content in TD the varText = $ ( This). text ();133 varA1 = '. Modal input[name= ';134 varA2 = ' "] ';135 vartemp = A1 + n +A2;136 $ (temp). val (text);137 });138 139 $ //var port = $ (tds[0]). Text ();141 //var host = $ (tds[1]). Text ();142 //143 //$ ('. Modal input[name= "hostname"]). Val (host);144 //$ ('. Modal input[name= ' port '] '). Val (port);145 //cyclic acquisition of content in TDs146 //get <td> content </td> get the middle content147 //assign to value in the input tag148 149 }); Max</script>151</body> theEffects such as:
Modal Box get content jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
