前端动态设计删除按钮-解网

问：

这是我制作的一个项目，它是一个图书馆，当您单击图片时，您可以在其中将书名和价格添加到表格中，并拥有我需要添加删除按钮或从总数和表格中删除我想要的书籍的总价

一审

<!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">
<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">
<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>

javascript jquery DOM 前端

答：

0赞 Ahmed Sbai 8/17/2023 #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>

我添加了函数并管理选定的书籍数组。
该函数现在相应地更新此数组，“价格”按钮根据所选书籍计算总价，“模型”按钮清除所选书籍并重置总价。addBookToSelectionremoveBookFromSelectionfunb1b2

0赞 Ezz Deghedy 8/20/2023

它像魔术一样工作，谢谢

上一个：Chrome 插件 - jQuery 访问元素的子节点

下一个：使用 jQuery on（）和 off（）切换 eventListener

前端动态设计删除按钮

front end dynamic Design remove button

评论

评论