CODEWITHSUNDEEP
javascripthtml
ICoded
ICoded

Reputation: 341

select and remove table row

Stackoverflow contains several solutions to remove a HTML table row. But I couldn´t find a way where the user can select a row and delete this one, with the help of a button. I am trying to get this done but struggle with the selection.

Especially because the rows of myTable does not contain any id or tag. Even if I would add a tag, this must be known to remove this row. Any idea how to solve the puzzle?

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Table Test</title>
    <!-- d3.js framework -->
    <script src="https://d3js.org/d3.v6.js"></script>
    <!-- fontawesome stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>

<style>
    #myTable {
        border-collapse: collapse;
    }

    #myTable td {
        border: 1px solid black;
        padding: 8px;
    }

    #delRow {
        width: auto;
        height: 30px;
    }

</style>

<body>
    <table id="myTable">
        <tbody>
            <!-- filled by script -->
        </tbody>
    </table>

    <button id="delRow">Del Row</button>

    <script>
        data = [
            {
                "property": "animal",
                "value": "dog"
            },
            {
                "property": "car",
                "value": "porsche"
            },
            {
                "property": "snacks",
                "value": "chips"
            }
        ]

        var myTable = document.getElementById("myTable")

        for (var i = 0; i < data.length; i++ ) {
            var row = `<tr>
                        <td contenteditable="true">${data[i].property}</td>
                        <td>${data[i].value}</td>`

            myTable.innerHTML += row   
        }


        var delRow = document.getElementById("delRow")

        delRow.addEventListener("click", function() {
            //delete selected row
            console.log("delRow clicked")
        })

    </script>
</body>

</html>

Upvotes: 0

Views: 505

Answers (3)

Tony Tin Nguyen
Tony Tin Nguyen

Reputation: 345

Thank @Vulwsztyn for the solution. We might add a highlight to the last click row, so the user know which will be removed.

        data = [
            {
                "property": "animal",
                "value": "dog"
            },
            {
                "property": "car",
                "value": "porsche"
            },
            {
                "property": "snacks",
                "value": "chips"
            }
        ]

        var myTable = document.getElementById("myTable")

        for (var i = 0; i < data.length; i++ ) {
            var row = `<tr>
                        <td contenteditable="true">${data[i].property}</td>
                        <td>${data[i].value}</td>`

            myTable.innerHTML += row   
        }


        var delRow = document.getElementById("delRow")
        let lastClickedRow = null
        for (var i = 0, row; row = myTable.rows[i]; i++) {
          row.addEventListener("click", function() {
            if(lastClickedRow != null) {
              lastClickedRow.style.background = null
            }
            lastClickedRow = this
            lastClickedRow.style.backgroundColor = 'yellow'
            console.log(lastClickedRow)
          })
        }
        delRow.addEventListener("click", function() {
            if (lastClickedRow) {
              lastClickedRow.remove()
            }
            console.log("delRow clicked")
        })
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Table Test</title>
    <!-- d3.js framework -->
    <script src="https://d3js.org/d3.v6.js"></script>
    <!-- fontawesome stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>

<style>
    #myTable {
        border-collapse: collapse;
    }

    #myTable td {
        border: 1px solid black;
        padding: 8px;
    }

    #delRow {
        width: auto;
        height: 30px;
    }

</style>

<body>
    <table id="myTable">
        <tbody>
            <!-- filled by script -->
        </tbody>
    </table>

    <button id="delRow">Del Row</button>
</body>

</html>

Upvotes: 1

Ramin Saffari
Ramin Saffari

Reputation: 11

the different way is add checkbox to rows:

data = [
            {
                "property": "animal",
                "value": "dog"
            },
            {
                "property": "car",
                "value": "porsche"
            },
            {
                "property": "snacks",
                "value": "chips"
            }
        ]

        var myTable = document.getElementById("myTable")

        for (var i = 0; i < data.length; i++ ) {
            var row = `<tr id="row-${i}">
                        <td><input type="checkbox" class="checkbox"></td>
                        <td contenteditable="true">${data[i].property}</td>
                        <td>${data[i].value}</td>`

            myTable.innerHTML += row   
        }


        var delRow = document.getElementById("delRow")
        //delete selected row
        delRow.addEventListener("click", function() {
            var checkbox = document.getElementsByClassName("checkbox");
            var length = checkbox.length;
            if(length > 0){
                for(var i=0; i < length; i++){
                    if(checkbox[i].checked === true){
                        var rowname = "row-"+i;
                        //for remove rows
                        //document.getElementById(rowname).remove();
                        // for display=none
                        document.getElementById(rowname).style.display = 'none';
                        
                    }
                }
               
            }
            //console.log("delRow clicked")
        })
 #myTable {
        border-collapse: collapse;
    }

    #myTable td {
        border: 1px solid black;
        padding: 8px;
    }

    #delRow {
        width: auto;
        height: 30px;
    }
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Table Test</title>
    <!-- d3.js framework -->
    <script src="https://d3js.org/d3.v6.js"></script>
    <!-- fontawesome stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<body>
    <table id="myTable">
        <tbody>
            <!-- filled by script -->
        </tbody>
    </table>

    <button id="delRow">Del Row</button>

</body>

</html>

Upvotes: 1

Vulwsztyn
Vulwsztyn

Reputation: 2261

You could keep track of last clicked row e.g. in lastClickedRow variable and add listener switching the variable's value to each row.

It may not be the most effective option but it works.

        data = [
            {
                "property": "animal",
                "value": "dog"
            },
            {
                "property": "car",
                "value": "porsche"
            },
            {
                "property": "snacks",
                "value": "chips"
            }
        ]

        var myTable = document.getElementById("myTable")

        for (var i = 0; i < data.length; i++ ) {
            var row = `<tr>
                        <td contenteditable="true">${data[i].property}</td>
                        <td>${data[i].value}</td>`

            myTable.innerHTML += row   
        }


        var delRow = document.getElementById("delRow")
        let lastClickedRow = null
        for (var i = 0, row; row = myTable.rows[i]; i++) {
          row.addEventListener("click", function() {
            lastClickedRow = this
            console.log(lastClickedRow)
          })
        }
        delRow.addEventListener("click", function() {
            if (lastClickedRow) {
              lastClickedRow.remove()
            }
            console.log("delRow clicked")
        })
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Table Test</title>
    <!-- d3.js framework -->
    <script src="https://d3js.org/d3.v6.js"></script>
    <!-- fontawesome stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>

<style>
    #myTable {
        border-collapse: collapse;
    }

    #myTable td {
        border: 1px solid black;
        padding: 8px;
    }

    #delRow {
        width: auto;
        height: 30px;
    }

</style>

<body>
    <table id="myTable">
        <tbody>
            <!-- filled by script -->
        </tbody>
    </table>

    <button id="delRow">Del Row</button>
</body>

</html>

Upvotes: 2

Related Questions