<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; 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> <a onclick="AddElement();">添加</a> <table border="1"> <tr> <td>192.168.1.1</td> <td>80</td> <td><a class="edit">编辑</a> |<a>删除</a></td> </tr> <tr> <td>192.168.1.2</td> <td>80</td> <td><a class="edit">编辑</a> |<a>删除</a></td> </tr> <tr> <td>192.168.1.3</td> <td>80</td> <td><a class="edit">编辑</a> |<a>删除</a></td> </tr> <tr> <td>192.168.1.4</td> <td>80</td> <td><a class="edit">编辑</a> |<a>删除</a></td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text"/> <input name="port" type="text"/> <!--<input name="" type="text"/>--> </div> <div> <input type="button" value="取消" onclick="cancelModdal()"> </div> </div> <div class="shadow hide"></div> <script src="jquery.js"></script> <script> function AddElement() { $('.modal,.shadow').removeClass('hide') } function cancelModdal() { $('.modal,.shadow').addClass('hide') $('.modal input[type="text"]').val("") } $('.edit').click(function () { $('.modal,.shadow').removeClass('hide') var tds =$(this).parent().prevAll(); // 循环获取tds内容 // 赋值给input的value.获取tr中的值 var port = $(tds[0]).text(); var host = $(tds[1]).text(); $('.modal input[name="hostname"]').val(host) $('.modal input[name="port"]').val(port) }) </script> </body> </html>
文本操作;
$(..).text() #获取文本内容
$(..).text("<a>1</a>")#设置文本内容
$(..).html() #获取标签
$(..).html("<a>1</a>")#设置标签
$('#i2').val()#获取value的值
$('#i2').val('11')#设置value的值