表单的编辑添加和删除 .removeClass() .append() .preAll() .attr('b') document.createElement()
Posted python我的最爱
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单的编辑添加和删除 .removeClass() .append() .preAll() .attr('b') document.createElement()相关的知识，希望对你有一定的参考价值。
1.$(..).removeClass() 去除属性
2$(..).append 把内容加在后面
3.$(..).preAll() 前面所有的兄弟属性
4.$(..).attr(‘b‘) 属性b对应的数值
5.document.createElement() 创建标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .model{ position: fixed; height: 500px; width: 500px; top: 50%; left: 50%; margin-top: -200px; margin-left: -200px; z-index: 10; background-color: white; } .shadow{ position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 9; opacity: 0.6; background-color: black; } .hide{ display: none; } </style> </head> <body> <div onclick="add3Element()">添加</div> <table border="1px" class="tb"> <tr> <td b="post">1.1.1.1</td> <td b="host">80</td> <td> <span class="edit">编辑</span>｜<span class="delete">删除</span> </td> </tr> <tr> <td b="post">1.1.1.2</td> <td b="host">80</td> <td> <span class="edit">编辑</span>｜<span class="delete">删除</span> </td> </tr> <tr> <td b="post">1.1.1.3</td> <td b="host">80</td> <td> <span class="edit">编辑</span>｜<span class="delete">删除</span> </td> </tr> <tr> <td b="post">1.1.1.4</td> <td b="host">80</td> <td> <span class="edit">编辑</span>｜<span class="delete">删除</span> </td> </tr> </table> <div class="model hide"> <div><input type="text" a="post"></div> <div><input type="text" a="host"></div> <div><input type="button" value="取消" onclick="onDelete()"></div> <div><input type="button" value="确定" onclick="onSure()"></div> </div> <div class="shadow hide"></div> <script src="../jquery-2.12.4.js"></script> <script> $(‘.edit‘).click(function () { $(‘.model, .shadow‘).removeClass(‘hide‘); var v = $(this).parent().prevAll(); v.each(function(){ tag = $(this).attr(‘b‘); //获取属性b的值 console.log(tag); ft = $(this).text(); tag1 = ‘.model input[a=‘ + tag +‘]‘; $(tag1).val(ft) }) }); $(‘.delete‘).click(function () { $(this).parent().parent().remove() }); function onDelete(){ $(‘.model, .shadow‘).addClass(‘hide‘); $(‘.model input[type="text"]‘).val(‘‘) } function add3Element() { $(‘.model, .shadow‘).removeClass(‘hide‘); } function onSure(){ t1 = ‘1.1.1.1‘; t2 = ‘80‘; var tr = document.createElement(‘tr‘); td1 = document.createElement(‘td‘); td1.innerHTML=t1; td2 = document.createElement(‘td‘); td2.innerHTML=t2; $(tr).append(td1); $(tr).append(td2); console.log(tr); $(‘.tb‘).append(tr) } </script> </body> </html>
以上是关于表单的编辑添加和删除 .removeClass() .append() .preAll() .attr('b') document.createElement()的主要内容，如果未能解决你的问题，请参考以下文章
Sharepoint 2010添加，编辑，删除表单替换为自定义可视Web部件