代码之家  ›  专栏  ›  技术社区  ›  Ezz Deghedy

前端动态设计删除按钮

frontend dom jquery javascript
  •  0
  • Ezz Deghedy  · 技术社区  · 1 年前

    这是我做的一个项目,它是一个库,当你点击图片时,你可以将书名和价格添加到表格中,并获得我需要的总价,以添加一个删除按钮或从总价和表格中删除我想要的书

    初审 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            margin: 3px;
            cursor: pointer;
            box-shadow: 5px 5px 3px 2px violet;
            border: 4px groove darkviolet;
        }
        div{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr ;
            background-color: azure;
            padding: 7px;
            border: 4px groove greenyellow;
        }
        .c1{
            border: 10px ridge crimson;
        }
        #d2{
            display: flexbox;
            flex-basis: 4;
            background-color: bisque;
        }
        #b1{
            grid-column: 0/1;
            grid-row: 1/3;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            margin: 4px;
        }
        #t1{
            grid-column: 2/4;
            grid-row: 1/3;
            border: 3px solid blue;
            box-shadow: 2px 2px 1.5px 1px skyblue;
            margin:5px;
        }
        table{
            background-color: antiquewhite;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border: 4px solid sandybrown;
        }
        tr{
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
        }
        td{
            margin: 10px;
            color: turquoise;
            border: 1.5px solid black;
            padding: 6px;
            
        }
      
        
    </style>
</head>
<body>
    <div class="d1">
    <img src="b1.jpg" alt="book1" width="50%">
    <img src="b2.jpg" alt="book2" width="50%">
    <img src="b3.jpg" alt="book3" width="50%">
    <img src="b4.jpg" alt="book4" width="50%">
    <img src="b5.jpg" alt="book5" width="50%">
    <img src="b6.jpg" alt="book6" width="50%">
    <img src="b7.jpg" alt="book7" width="50%">
    <img src="b8.jpg" alt="book8" width="50%">
    </div>
    <table id="ta">
        <thead>
            <tr>
                <td>SN:-</td>
                <td>Book name</td>
                <td>Price</td>
                
                
            </tr>
        </thead>
        <tbody id="tb">
            
        </tbody>
        <tfoot>
            <input type="button" value="price" id="b1" >  
            <input type="text" aria-label="price" id="t1">
        </tfoot>
    </table>
</body>
<script>
    var allBooks = [
        {name:"b1.jpg",title:"A Hero Born", Price: 20},
        {name:"b2.jpg",title:"Pearless Martial God", Price: 45},
        {name:"b3.jpg",title:"Five Rings Of Cultivation", Price: 14},
        {name:"b4.jpg",title:"Book Eater", Price: 19},
        {name:"b5.jpg",title:"Dual Sword God", Price: 15},
        {name:"b6.jpg",title:"Dragon Heart", Price: 18},
        {name:"b7.jpg",title:"Listening To Rain", Price: 55},
        {name:"b8.jpg",title:"The Hidden Blade", Price: 40}
    ];
    var selectedBooks = [];
    var b = document.getElementsByTagName("img");
    for(var i = 0 ; i < b.length;i++){
        b[i].addEventListener("click",fun);

    };
    function fun(event){
        if(event.target.getAttribute("class")=="c1"){
        event.target.setAttribute("class","");}
        else{event.target.setAttribute("class","c1")}
        
    };
   ;
    var tP = 0;
    var sb = document.getElementsByClassName("c1");
    document.getElementById("b1").addEventListener("click",fun3);
    function fun3(){
    
    for(var i = 0; i < sb.length;i++){
        var ssb = sb[i].getAttribute("src");
        var n = 0;
        for(var j = 0 ; j < allBooks.length;j++ ){
            n ++;
            if(ssb==allBooks[j].name){
               
                var r = `<tr><td> ${n} </td><td> ${allBooks[j].title} </td><td> ${allBooks[j].Price} </td></tr>`
            document.getElementById("tb").innerHTML += r;
            tP = tP + allBooks[j].Price;
            
            document.getElementById("t1").value = tP;
        }
        else{
            tP = tP;
        }
        
    }
   
}
return tP}
console.log(tP);
//how to take the tP variable out of the function;
// how to deduce??
//flexbox display
//console.log(fun3)

</script>

</html>

    第二次审判 Html、css和Js 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            margin: 3px;
            cursor: pointer;
            box-shadow: 5px 5px 3px 2px violet;
            border: 4px groove darkviolet;
        }
        div{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr ;
            background-color: azure;
            padding: 7px;
            border: 4px groove greenyellow;
        }
        .c1{
            border: 10px ridge crimson;
        }
        #d2{
            display: flexbox;
            flex-basis: 4;
            background-color: bisque;
        }
        #b1{
            grid-column: 0/1;
            grid-row: 1/3;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            margin: 4px;
        }
        #t1{
            grid-column: 2/5;
            grid-row: 1/3;
            border: 3px solid blue;
            box-shadow: 2px 2px 1.5px 1px skyblue;
            margin:5px;
        }
        table{
            width: 100%;
            background-color: antiquewhite;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border: 4px solid sandybrown;
        }
        tr{
            display: grid;
            grid-template-columns: 1fr 2fr 1fr 1fr;
        }
        td{
            margin: 10px;
            color: turquoise;
            border: 1.5px solid black;
            padding: 6px;
            
        }
      
        
    </style>
</head>
<body>
    <div class="d1">
    <img src="b1.jpg" alt="book1" width="50%">
    <img src="b2.jpg" alt="book2" width="50%">
    <img src="b3.jpg" alt="book3" width="50%">
    <img src="b4.jpg" alt="book4" width="50%">
    <img src="b5.jpg" alt="book5" width="50%">
    <img src="b6.jpg" alt="book6" width="50%">
    <img src="b7.jpg" alt="book7" width="50%">
    <img src="b8.jpg" alt="book8" width="50%">
    </div>
    <table id="ta">
        <thead>
            <tr>
                <td>SN:-</td>
                <td>Book name</td>
                <td>Price</td>
                
            </tr>
        </thead>
        <tbody id="tb">
            
        </tbody>
        <tfoot>
            <input type="text" aria-label="price" id="t1">
        </tfoot>
    </table>
</body>
<script>
    var allBooks = [
        {name:"b1.jpg",title:"A Hero Born", Price: 20},
        {name:"b2.jpg",title:"Pearless Martial God", Price: 45},
        {name:"b3.jpg",title:"Five Rings Of Cultivation", Price: 14},
        {name:"b4.jpg",title:"Book Eater", Price: 19},
        {name:"b5.jpg",title:"Dual Sword God", Price: 15},
        {name:"b6.jpg",title:"Dragon Heart", Price: 18},
        {name:"b7.jpg",title:"Listening To Rain", Price: 55},
        {name:"b8.jpg",title:"The Hidden Blade", Price: 40}
    ];
    var selectedBooks = [];
    var b = document.getElementsByTagName("img");
    for(var i = 0 ; i < b.length;i++){
        b[i].addEventListener("click",fun);

    };
    var tP = 0;
    var sb = document.getElementsByClassName("c1");

    function fun(event){
        if(event.target.getAttribute("class")=="c1"){
        event.target.setAttribute("class","");
        document.getElementById("tb").innerHTML += r.remove();
        event.target.remove()
    }
        else{event.target.setAttribute("class","c1")}
        for(var i = 0; i < sb.length;i++){
        var ssb = sb[i].getAttribute("src");
        var n = 0;
        for(var j = 0 ; j < allBooks.length;j++ ){
            n ++;
            if(ssb==allBooks[j].name){
                var d = function (l){
                        l.parentElement.parentElement.remove()
            }
                var r = `<tr><td> ${n} </td><td> ${allBooks[j].title} </td><td> ${allBooks[j].Price} </td><td><button onclick="d(this)" class="fb">delete</button></td><tr>`
                    
            document.getElementById("tb").innerHTML += r;
            tP = tP + allBooks[j].Price;
            
            document.getElementById("t1").value = tP;
        }
        
    }
    };
  }  ;
//how to take the tP variable out of the function;
// how to deduce??
//flexbox display
</script>

</html>

    第三次审判 Html、css和Js 

    <!DOCTYPE html>
<html lang=“en”>
<头部>
<meta字符集=“UTF-8”>
<meta name=“viewport”content=“width=设备宽度,初始比例=1.0”>
<title>文件</title>
<风格>
img{
保证金:3px;
游标:指针;
方框阴影:5px 5px 3px 2px紫色;
边框:4px深紫色凹槽;
}
div{
显示:网格;
网格模板柱:1fr 1fr 1fr-1fr;
网格模板行:1fr 1fr;
背景颜色:天蓝色;
填充:7px;
边框:4px凹槽绿黄色;
}
.c1{
边框:10px脊深红色;
}
#d2{
显示器:flexbox;
弹性基础:4;
背景颜色:淡褐色;
}
#b1{
网格列:0/1;
网格行:1/3;
字体家族:Verdana、Geneva、Tahoma、无衬线字体;
边距:4px;
}
#t1{
网格柱:2/5;
网格行:1/3;
边框:3px纯蓝色;
框阴影:2px 2px 1.5px 1px天蓝色;
边距:5px;
}
桌子{
宽度:100%;
背景颜色:仿古白色;
字体家族:“Segoe UI”、Tahoma、Geneva、Verdana、无衬线字体;
边框:4px实心沙纹;
}
tr{
显示:网格;
网格模板柱:1fr 2fr 1fr 1fr;
}
td{
边距:10倍;
颜色:青绿色;
边框:1.5px纯黑色;
填充:6px;

}


</风格>
</头部>
<身体>
<div类=“d1”>
<img src=“b1.jpg”alt=“book1”width=“50%”>
<img src=“b2.jpg”alt=“book2”width=“50%”>
<img src=“b3.jpg”alt=“book3”width=“50%”>
<img src=“b4.jpg”alt=“book4”width=“50%”>
<img src=“b5.jpg”alt=“book5”width=“50%”>
<img src=“b6.jpg”alt=“book6”width=“50%”>
<img src=“b7.jpg”alt=“book7”width=“50%”>
<img src=“b8.jpg”alt=“book8”width=“50%”>
</div>
<表id=“ta”>
<thead>
<tr>
<td>序号:</td>
<td>书籍名称</td>
<td>价格</td>

</tr>
</thead>
<tbody id=“tb”>

</tbody>
<tfoot>
<输入类型=“text”aria-label=“price”id=“t1”>
</tfoot>
</表>
</身体>
<脚本>
var allBooks=[
{名称:“b1.jpg”,标题:“英雄诞生”,价格:20},
{名称:“b2.jpg”,标题:“无珍珠武神”,价格:45},
{名称:“b3.jpg”,标题:“五环修炼”,价格:14},
{名称:“b4.jpg”,标题:“食书人”,价格:19},
{名称:“b5.jpg”,标题:“双剑神”,价格:15},
{名称:“b6.jpg”,标题:“龙心”,价格:18},
{名称:“b7.jpg”,标题:“听雨”,价格:55},
{名称:“b8.jpg”,标题:“隐藏的刀刃”,价格:40}
];
var selectedBooks=[];
var b=document.getElementsByTagName(“img”);
for(var i=0;i<b.length;i++){
b[i].addEventListener(点击,有趣);

};
var tP=0;
var sb=document.getElementsByClassName(“c1”);

功能乐趣(活动){
if(event.target.getAttribute(“class”)==“c1”){
event.target.setAttribute(“类”、“”);
document.getElementById(“tb”).interHTML+=r.remove();
event.target.remove()
}
else{event.target.setAttribute(“class”,“c1”)}
for(var i=0;i<sb.length;i++){
var ssb=sb[i].getAttribute(“src”);
var n=0;
for(var j=0;j<allBooks.length;j++){
n
if(ssb==allBooks[j].name){
var d=函数(l){
l.parentElement.parentElement.remove()
}
var r=`<tr><td>${n} </td><td>${allBooks[j].title}</td><td>${所有书籍[j].价格}</td><td><按钮onclick=“d(this)”class=“fb”>删除</按钮></td><tr>`

document.getElementById(“tb”).interHTML+=r;
tP=tP+所有书籍[j]。价格;

document.getElementById(“t1”).value=tP;
}

}
};
}  ;
//如何从函数中取出tP变量;
//如何推断??
//柔性箱显示器
</脚本>

</html>

    第四次审判 Html、css和JavaScript 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            margin: 3px;
            cursor: pointer;
            box-shadow: 5px 5px 3px 2px violet;
            border: 4px groove darkviolet;
        }
        div{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr ;
            background-color: azure;
            padding: 7px;
            border: 4px groove greenyellow;
        }
        .c1{
            border: 10px ridge crimson;
        }
        #d2{
            display: flexbox;
            flex-basis: 4;
            background-color: bisque;
        }
        #b1{
            grid-column: 0/1;
            grid-row: 1/3;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            margin: 4px;
        }
        #t1{
            grid-column: 2/4;
            grid-row: 1/3;
            border: 3px solid blue;
            box-shadow: 2px 2px 1.5px 1px skyblue;
            margin:5px;
        }
        #b2{
            grid-column:4/5;
             grid-row: 1/3;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            margin: 4px;
        }
        table{
            background-color: antiquewhite;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border: 4px solid sandybrown;
        }
        tr{
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
        }
        td{
            margin: 10px;
            color: turquoise;
            border: 1.5px solid black;
            padding: 6px;
            
        }
      
        
    </style>
</head>
<body>
    <div class="d1">
    <img src="b1.jpg" alt="book1" width="50%">
    <img src="b2.jpg" alt="book2" width="50%">
    <img src="b3.jpg" alt="book3" width="50%">
    <img src="b4.jpg" alt="book4" width="50%">
    <img src="b5.jpg" alt="book5" width="50%">
    <img src="b6.jpg" alt="book6" width="50%">
    <img src="b7.jpg" alt="book7" width="50%">
    <img src="b8.jpg" alt="book8" width="50%">
    </div>
    <table id="ta">
        <thead>
            <tr>
                <td>SN:-</td>
                <td>Book name</td>
                <td>Price</td>
                
                
            </tr>
        </thead>
        <tbody id="tb">
            
        </tbody>
        <tfoot>
            <input type="button" value="price" id="b1" >  
            <input type="text" aria-label="price" id="t1">
            <input type="button" value="model" id="b2" >  
        </tfoot>
    </table>
</body>
<script>
    var allBooks = [
        {name:"b1.jpg",title:"A Hero Born", Price: 20},
        {name:"b2.jpg",title:"Pearless Martial God", Price: 45},
        {name:"b3.jpg",title:"Five Rings Of Cultivation", Price: 14},
        {name:"b4.jpg",title:"Book Eater", Price: 19},
        {name:"b5.jpg",title:"Dual Sword God", Price: 15},
        {name:"b6.jpg",title:"Dragon Heart", Price: 18},
        {name:"b7.jpg",title:"Listening To Rain", Price: 55},
        {name:"b8.jpg",title:"The Hidden Blade", Price: 40}
    ];
    var selectedBooks = [];
    var b = document.getElementsByTagName("img");
    for(var i = 0 ; i < b.length;i++){
        b[i].addEventListener("click",fun);

    };
    function fun(event){
        if(event.target.getAttribute("class")=="c1"){
        event.target.setAttribute("class","");}
        else{event.target.setAttribute("class","c1")}
        
    };
   ;
    var tP = 0;
    var sb = document.getElementsByClassName("c1");
    document.getElementById("b1").addEventListener("click",fun3);
    function fun3(){
    
    for(var i = 0; i < sb.length;i++){
        var ssb = sb[i].getAttribute("src");
        var n = 0;
        for(var j = 0 ; j < allBooks.length;j++ ){
            n ++;
            if(ssb==allBooks[j].name){
               
                var r = `<tr><td> ${n} </td><td> ${allBooks[j].title} </td><td> ${allBooks[j].Price} </td></tr>`
            document.getElementById("tb").innerHTML += r;
            tP = tP + allBooks[j].Price;
            
            document.getElementById("t1").value = tP;
        }
        else{
            tP = tP;
        }
        
    }
    console.log(tP);
}}
//how to take the tP variable out of the function;
// how to deduce??
//flexbox display
//console.log(fun3)
document.getElementById("b2").addEventListener("click",function(){
var ssa = document.getElementsByClassName("c1")
for(var i = 0 ; i<allBooks.length; i++){
    var sa = ssa[i].getAttribute("src");
    for(var j = 0;j<allBooks.length; j++)
    if(ssa == allBooks[j].name){
       var tt = 0 + allBooks[j].Price;
    }
}
    
    document.getElementById("t1").value = tt;
})
</script>

</html>
    0 回复  |  直到 1 年前
        1
  •  0
  •   Ahmed Sbai    1 年前

    要实现删除选定书籍的功能,您可以修改 fun 函数切换类并更新所选书籍数组。此外,您还可以实现一个从选择中删除书籍的函数: 

    // ...

<script>
    // ... your code

    function fun(event) {
        const bookImage = event.target;

        if (bookImage.classList.contains("c1")) {
            bookImage.classList.remove("c1");
            removeBookFromSelection(bookImage);
        } else {
            bookImage.classList.add("c1");
            addBookToSelection(bookImage);
        }
    }

    function addBookToSelection(bookImage) {
        const bookName = bookImage.getAttribute("src");
        const selectedBook = allBooks.find(book => book.name === bookName);
        if (selectedBook) {
            selectedBooks.push(selectedBook);
        }
    }

    function removeBookFromSelection(bookImage) {
        const bookName = bookImage.getAttribute("src");
        const indexToRemove = selectedBooks.findIndex(book => book.name === bookName);
        if (indexToRemove !== -1) {
            selectedBooks.splice(indexToRemove, 1);
        }
    }

    document.getElementById("b1").addEventListener("click", function () {
        tP = 0;
        selectedBooks.forEach(book => {
            tP += book.Price;
        });
        document.getElementById("t1").value = tP;
    });

    document.getElementById("b2").addEventListener("click", function () {
        tP = 0;
        selectedBooks = []; 
        document.getElementById("t1").value = tP;
    });
</script>

    我添加了功能 addBookToSelection 和 removeBookFromSelection 以管理所选书籍阵列。
    这个 乐趣 函数现在相应地更新此数组,点击“价格”按钮 b1 根据所选书籍和“型号”按钮计算总价 b2 清除所选书籍并重置总价。

    推荐文章
    Newbie_Coder  ·  如何使用Jquery无画布裁剪框架
    1 年前
    usman610  ·  Javascript代码在点击回车键和点击按钮时删除行
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Carly  ·  在页面加载时滑入div,然后单击以滑入和滑出(jQuery)
    1 年前
    Community wiki  ·  jquery弹出窗口不会用按键关闭,但会点击
    1 年前
    Community wiki  ·  Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?
    1 年前
    Community wiki  ·  无法从jquery文档调用函数
    1 年前
    marzouk najib  ·  Uncaught ReferenceError:未定义FullCalendar
    2 年前
    Pepe  ·  检查“data”属性是否包含输入值的一部分(jQuery)
    2 年前
    laurence keith albano  ·  如何使用Jquery在父类内添加子父类
    2 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号