jQuery 之 模態編輯框實例（文本獲取值與設置值）
阿新 • • 發佈：2019-04-03
data -c .sh utf aac order spa -o ima 代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.js"></script> <style> .modal{ position: fixed; top: 50%; left: 50%; height: 400px; width: 400px; margin-left: -250px; margin-top: -250px; background-color: #dddddd; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } .hide{ display: none; } </style> </head> <body> <input type="button" onclick="addElement()" value="添加"> <table border="1"> <thead> <tr> <th style="text-align: center">序號</th> <th style="text-align: center">IP</th> <th style="text-align: center">端口</th> <th style="text-align: center">操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1.1.1.1</td> <td>80</td> <td><a class="edit">編輯</a> | <a class="delete">刪除</a></td> </tr> <tr> <td>2</td> <td>2.2.2.2</td> <td>80</td> <td><a class="edit">編輯</a> | <a class="delete">刪除</a></td> </tr> <tr> <td>3</td> <td>3.3.3.3</td> <td>80</td> <td><a class="edit">編輯</a> | <a class="delete">刪除</a></td> </tr> </tbody> </table> <div class="shadow hide"></div> <div class="modal hide"> <div> <span>序號：</span><label id="id"></label> <input id="hostname" name="hostname" type="test"> <input id="port" name="port" type="test"> <br> <input type="button" value="提交" onclick="subbiteData()"> <input type="button" value="取消" onclick="cancalModal()"> </div> </div> <script> function addElement() { $(".shadow,.modal").removeClass(‘hide‘) $("#hostname").val("") $("#port").val("") } function cancalModal() { $(".shadow,.modal").addClass(‘hide‘) } $(‘.edit‘).click(function () { $(".shadow,.modal").removeClass(‘hide‘) //this當表當前點擊的標簽 var tds = $(this).parent().prevAll() //獲取<td>內容</td>獲取中間的內容 //賦值給input標簽中的value值 //$(tds[0]).text() 獲取文本內容 //$(tds[0]).text(‘xxx‘) 設置文本內容 //(..).val() 獲取相對應類型的value值 //(..).val(..) 設置相對應類型的value值 var port = ($(tds[0]).text()) var hostname = ($(tds[1]).text()) var id = ($(tds[2]).text()) //其中一種比較簡易的寫法 // $("#hostname").val(hostname) // $("#port").val(port) //通過獲取標簽屬性操作 $(‘.modal input[name="hostname"]‘).val(hostname) $(‘.modal input[name="port"]‘).val(port) $("#id").text(id) }) function subbiteData() { //暫沒提交功能 var id = $("#id").text() console.log(id) } </script> </body> </html>
展示
jQuery 之 模態編輯框實例（文本獲取值與設置值）