CODEWITHSUNDEEP
javascriptjqueryhtmlajaxcsv
harryOsborn
harryOsborn

Reputation: 33

Updating a client side table

I am reading data from a csv file and showing it in the form of table on screen. I have checkbox before every row with 'ID' saved as value in respective checkboxes. Now I want to remove fields with 'checked' checkboxes from the displayed table on the click of button - Cancel/Save

HTML Code- 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  

<!DOCTYPE html>
<html>
<head>
    <title>ABCD</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src ="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script>
    <!--<script type="text/javascript" src="JavaScript.js"></script>-->
    <script type="text/javascript" src="JavaScript2.js"></script>
     <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 15px;
        }

        th {
            text-align: left;
        }

        table {
            border-spacing: 5px;
        }

    </style>

</head>
<body>

    <div class="container">
        <div class="row">
            <h2>EFGH</h2>
            <p>KLMNO </p>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">KKKK</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-12 col-sm-offset-1">
                        <div class="page-header">
                            <h2>----</h2>
                        </div>
                        <form id="form1" runat="server" class="form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-5">
                                    <div class="col-sm-6"><input type="file" accept=".csv" id="fileUpload"/></div>
                                    <div class="col-sm-6"><input type="button" id="upload" class="btn btn-primary" value="Upload" /></div>

                                </div>
                                <div class="col-sm-7">
                                    <div class="col-sm-2"><input type="button" id="cancel" class="btn btn-primary btn pull-right"  value="Cancel/Save" style="visibility:hidden" /></div>
                                    <div class="col-sm-2"><input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility:hidden"  /></div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="row">
                   <div class="col-sm-12">   
                    <div class="panel panel-default" style="align-self:center">
                      <div class="panel-body" style="max-height: 400px;min-height:400px;overflow-y: scroll;">
                        <div class="row">
                          <div class="col-sm-12"><center>
                                                        <div class="input-append" id="filterDev" style="visibility:hidden">
                                                          <input name="search" id="search" placeholder="Enter PO to filter" />
                                                             <input type="button" value="Filter" id="filter" class="btn btn-primary" />
                                                                </div></center></div><br /><br />

                        </div>     
                          <div class="row">
                              <div class="col-sm-12" id="dvCSV"></div>
                          </div>
                      </div>

                    </div>
                   </div>
                </div>
            </div>
        </div>

         </div>


</body>
</html>

JavaScript2.js

$(function () {
    $("#upload").bind("click", function () {

        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
        if (regex.test($("#fileUpload").val().toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var table = $("<table />");
                    var rows = e.target.result.split("\n");
                    for (var i = 0; i < rows.length; i++) {
                        var row = $("<tr />");
                        var cells = rows[i].split(",");

                        $("<td/>").html('<input type="checkbox" id='+cells[0]+'>').appendTo(row);
                        //alert(cells[0]);
                        for (var j = 0; j < cells.length; j++) {

                            $("<td/>").html('<input type="text" disabled value=' +cells[j]+ '>').appendTo(row);
                            $("<td/>")
                        }
                        table.append(row);
                    }
                    $("#dvCSV").html('');
                    $("#dvCSV").append(table);
                    document.getElementById("cancel").style.visibility = "visible";
                    document.getElementById("process").style.visibility = "visible";
                    document.getElementById("filterDev").style.visibility = "visible";
                    //document.getElementById("filter").style.visibility = "visible";

                }
                reader.readAsText($("#fileUpload")[0].files[0]);
            } else {
                alert("This browser does not support HTML5.");
            }
        } else {
            alert("Please upload a valid CSV file.");
        }

    });
});

How can this be implemented?

Upvotes: 0

Views: 110

Answers (2)

rkeet
rkeet

Reputation: 3468

To remove checked checkboxes you can use jQuery.

To remove just the checkboxes:

$('input').is(':checked').remove()

To do this "on a submit" of something, like a button click: 

//Specific for button with ID someButton
$('button #someButton').on('click', function() {
    $('input').is(':checked').remove();
});

Have a look at the jQuery checked selector, especially when combining it with the .is() function.

Like @Kartal answer, but without the .each() method you can delete all selected rows from the table like so:

//Remove all selected rows
$('button #someButton').on('click', function() {
    $('tr > input:checked').remove();
});

The > selector is described here

Upvotes: 1

Kartal
Kartal

Reputation: 444

I assumed that you want to remove the row completely. Maybe you should clarify that a bit.

Add this script tag under your html file, or include it as a seperate js file. Tested, working.

<script type="text/javascript">

$("#cancel").on("click", function() {
    $('input:checked').each( function() {
        $( this ).closest("tr").remove();
    });
});

</script>

Upvotes: 1

Related Questions