js增删改除 - 走看看

zoukankan html css js c++ java

js增删改除

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建类目</title>
<style>
* {
margin: 0;
padding: 0;
}

.box {
700px;
height: 360px;
margin: 60px auto;
border: 2px solid grey;
}

.content-left {
720px;
overflow: hidden;
margin-top: 60px;
margin-left: 60px;
}

.content-left > .pass {
margin-bottom: 20px;
}

.content-left > .pass > .pass-label {
float: left;
height: 42px;
65px;
margin-right: 10px;
line-height: 42px;
font-size: 14px;
color: #666;
font-weight: 700;
text-align: right;
}

.content {
980px;
margin: 0 auto;
height: 526px;
margin-top: 30px;
}

.content-left > .pass > .pass-input {
height: 16px;
290px;
padding: 11px 10px;
margin-right: 10px;
border: 2px solid #ddd;
font-size: 14px;
color: #666;
}

.content-left > .pass > .pass-input:hover {
border: 2px solid darkgreen;
transition: all 1s;
}

.word {
margin-top: -319px;
position: absolute;
background: white;
margin-left: -36px;
font-family: "黑体";
}

.content-left > .submit > a > .pass-input-s {
background-color: #009a61;
height: 50px;
120px;
margin-left: 32px;
border-radius: 6px;
border: 2px solid #bcbcbc;
font-size: 16px;
font-weight: 700;
cursor: pointer;
color: #fff;
}

#sel1 {
margin-top: 5px;
height: 28px;
39px;
}

.box2 {
/* 700px;*/
border: 2px solid grey;
margin: auto;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 53px;
margin-left: -2px;
}

tr > td {
height: 40px;
120px;
line-height: 40px;
}

tr > td:nth-of-type(4) {
237px;
border-right: none;
}

tr {
display: inline-block;
700px;
}
.box1{
100%;
height: 100%;
background: red;
position: fixed;
margin: -485px 0;
background: rgb(0,0,0,0.3);
display: none;
}
.xiugaibox{
500px;
height: 300px;
background: #FFFFFF;
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
}
.xiugaibox1{
500px;
height: 50px;
display: flex;
justify-content: space-between;
}
.xiugaibox1 div:nth-of-type(1){
100px;
height: 50px;
color: red;
position: relative;
top: 20px;
left: 20px;
}
.xiugaibox1 div:nth-of-type(2){
50px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
cursor: pointer;
}
.xiugaibox2{
500px;
height: 250px;
}
</style>
</head>
<body>

<div class="box">
<div class="content-left">
<p class="pass">
<label class="pass-label">名字:</label>
<input class="pass-input" type="text" id="username">
</p>
<p class="pass">
<label class="pass-label">年龄:</label>
<input class="pass-input" type="text" id="age">
</p>
<p class="pass">
<label class="pass-label">性别:</label>
<select name="sel1" id="sel1">
<option value="女">女</option>
<option value="男">男</option>
</select>
</p>
<p class="pass submit">
<a href="javascript:0">
<input id="ipt" class="pass-input pass-input-s" type="submit" value="创建">
</a>
</p>

<div class="word">
<span>创建类目</span>
</div>
</div>
<table id="table" class="box2" border="1 " cellspacing="0" style="text-align: center">
<tr style="background-color:#42b983;text-align: center;">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>删除</td>
</tr>
<tr>
<td>杰克</td>
<td>30</td>
<td>男</td>
<td class="aa">
<input type="button" value="修改" onclick="tg(this)">
<input type="button" value="删除"
class="delete" onclick="oDel(this)">
</td>
</tr>
</table>
</div>
<div class="box1">
<div class="xiugaibox">
<div class="xiugaibox1">
<div>修改</div>
<div onclick="guanbi()">X</div>
</div>
<div class="xiugaibox2">
<table>
<tr>
<td style="text-align: right;">姓名：</td>
<td><input type="" name=""></td>
</tr>
<tr>
<td style="text-align: right;">年龄：</td>
<td><input type="" name=""></td>
</tr>
<tr>
<td style="text-align: right;">性别：</td>
<td><select>
<option value="男">男</option>
<option value="女">女</option>
</select></td>
</tr>
<tr style=" 500px;">
<td style=" 250px;position: relative; left: 100px;top: 50px;"><input type="button" name="" value="确认"></td>
<td style=" 250px;position: relative; left: 100px;top: 50px;"><input type="button" name="" value="取消" onclick="guanbi()"></td>

</tr>
</table>
</div>
</div>
</div>
</body>
<script>
function $(id) {
return document.getElementById(id);
}
function Creat(tag) {
return document.createElement(tag);
}
function classname(name){
return document.getElementsByClassName(name);
}
var oIpt = $("ipt");
var oSell = $("sel1");
var oUser = $("username");
var oAge = $("age");
var oTab = $("table");
var box1=classname('box1')[0];
oIpt.onclick = function () {
oTab.firstElementChild.innerHTML+= `<tr>
<td>${oUser.value}</td>
<td>${oAge.value}</td>
<td>${oSell.value}</td>
<td class="aa">
<input type="button" value="修改" className="xiugai" onclick="tg(this)">
<input type="button" value="删除" class="delete" onclick="oDel(this)">
</td>
</tr>`;
// 删除事件
}

function oDel(that) {
oTab.firstElementChild.removeChild( that.parentNode.parentNode)

}
function tg(a){
box1.style.display="block";
console.log(a)
}
function guanbi(){
box1.style.display="none";
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建类目</title>
<style>
* {
margin: 0;
padding: 0;
}

.box {
700px;
height: 360px;
margin: 60px auto;
border: 2px solid grey;
}

.content-left {
720px;
overflow: hidden;
margin-top: 60px;
margin-left: 60px;
}

.content-left > .pass {
margin-bottom: 20px;
}

.content-left > .pass > .pass-label {
float: left;
height: 42px;
65px;
margin-right: 10px;
line-height: 42px;
font-size: 14px;
color: #666;
font-weight: 700;
text-align: right;
}

.content {
980px;
margin: 0 auto;
height: 526px;
margin-top: 30px;
}

.content-left > .pass > .pass-input {
height: 16px;
290px;
padding: 11px 10px;
margin-right: 10px;
border: 2px solid #ddd;
font-size: 14px;
color: #666;
}

.content-left > .pass > .pass-input:hover {
border: 2px solid darkgreen;
transition: all 1s;
}

.word {
margin-top: -319px;
position: absolute;
background: white;
margin-left: -36px;
font-family: "黑体";
}

.content-left > .submit > a > .pass-input-s {
background-color: #009a61;
height: 50px;
120px;
margin-left: 32px;
border-radius: 6px;
border: 2px solid #bcbcbc;
font-size: 16px;
font-weight: 700;
cursor: pointer;
color: #fff;
}

#sel1 {
margin-top: 5px;
height: 28px;
39px;
}

.box2 {
/* 700px;*/
border: 2px solid grey;
margin: auto;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 53px;
margin-left: -2px;
}

tr > td {
height: 40px;
120px;
line-height: 40px;
}

tr > td:nth-of-type(4) {
237px;
border-right: none;
}

tr {
display: inline-block;
700px;
}
.box1{
100%;
height: 100%;
background: red;
position: fixed;
margin: -485px 0;
background: rgb(0,0,0,0.3);
display: none;
}
.xiugaibox{
500px;
height: 300px;
background: #FFFFFF;
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
}
.xiugaibox1{
500px;
height: 50px;
display: flex;
justify-content: space-between;
}
.xiugaibox1 div:nth-of-type(1){
100px;
height: 50px;
color: red;
position: relative;
top: 20px;
left: 20px;
}
.xiugaibox1 div:nth-of-type(2){
50px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
cursor: pointer;
}
.xiugaibox2{
500px;
height: 250px;
}
</style>
</head>
<body>

<div class="box">
<div class="content-left">
<p class="pass">
<label class="pass-label">名字:</label>
<input class="pass-input" type="text" id="username">
</p>
<p class="pass">
<label class="pass-label">年龄:</label>
<input class="pass-input" type="text" id="age">
</p>
<p class="pass">
<label class="pass-label">性别:</label>
<select name="sel1" id="sel1">
<option value="女">女</option>
<option value="男">男</option>
</select>
</p>
<p class="pass submit">
<a href="javascript:0">
<input id="ipt" class="pass-input pass-input-s" type="submit" value="创建">
</a>
</p>

<div class="word">
<span>创建类目</span>
</div>
</div>
<table id="table" class="box2" border="1 " cellspacing="0" style="text-align: center">
<tr style="background-color:#42b983;text-align: center;">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>删除</td>
</tr>
<tr>
<td>杰克</td>
<td>30</td>
<td>男</td>
<td class="aa">
<input type="button" value="修改" onclick="tg(this)">
<input type="button" value="删除"
class="delete" onclick="oDel(this)">
</td>
</tr>
</table>
</div>
<div class="box1">
<div class="xiugaibox">
<div class="xiugaibox1">
<div>修改</div>
<div onclick="guanbi()">X</div>
</div>
<div class="xiugaibox2">
<table>
<tr>
<td style="text-align: right;">姓名：</td>
<td><input type="" name=""></td>
</tr>
<tr>
<td style="text-align: right;">年龄：</td>
<td><input type="" name=""></td>
</tr>
<tr>
<td style="text-align: right;">性别：</td>
<td><select>
<option value="男">男</option>
<option value="女">女</option>
</select></td>
</tr>
<tr style=" 500px;">
<td style=" 250px;position: relative; left: 100px;top: 50px;"><input type="button" name="" value="确认"></td>
<td style=" 250px;position: relative; left: 100px;top: 50px;"><input type="button" name="" value="取消" onclick="guanbi()"></td>

</tr>
</table>
</div>
</div>
</div>
</body>
<script>
function $(id) {
return document.getElementById(id);
}
function Creat(tag) {
return document.createElement(tag);
}
function classname(name){
return document.getElementsByClassName(name);
}
var oIpt = $("ipt");
var oSell = $("sel1");
var oUser = $("username");
var oAge = $("age");
var oTab = $("table");
var box1=classname('box1')[0];
oIpt.onclick = function () {
oTab.firstElementChild.innerHTML+= `<tr>
<td>${oUser.value}</td>
<td>${oAge.value}</td>
<td>${oSell.value}</td>
<td class="aa">
<input type="button" value="修改" className="xiugai" onclick="tg(this)">
<input type="button" value="删除" class="delete" onclick="oDel(this)">
</td>
</tr>`;
// 删除事件
}

function oDel(that) {
oTab.firstElementChild.removeChild( that.parentNode.parentNode)

}
function tg(a){
box1.style.display="block";
console.log(a)
}
function guanbi(){
box1.style.display="none";
}

</script>
</html>

查看全文

相关阅读:
51Nod-1002-数塔取数问题
 Android Studio: Application Installation Failed解决方案
 1001 数组中和等于K的数对——51NOD
51Nod-1005 大数加法
 aiml_入门学习
 vim使用进阶
 学习寒小阳的博客之统计机器翻译
 安装cywin
TF-IDF学习
 Java文件读写操作

原文地址：https://www.cnblogs.com/fw282204258/p/10407722.html