Question

我正在从csv文件中读取数据并以屏幕上的表格形式显示。我在每行前面都有一个复选框，其中包含＆＃39; ID＆＃39;在相应的复选框中保存为值。现在，我想删除带有＆＃39;已检查＆＃39;单击按钮时显示的表格中的复选框 - 取消/保存

HTML代码 -

<%@ 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.");
        }

    });
});

如何实施？

Answer 1

要删除checked复选框，您可以使用jQuery。

仅删除复选框：

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

要执行“提交”某事，例如点击按钮：

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

查看jQuery checked selector，尤其是在将其与.is() function结合使用时。

与@Kartal一样回答，但如果没有.each() method，您可以从表中删除所有选定的行，如下所示：

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

>选择器为described here

Answer 2

我原以为你要完全删除该行。也许你应该澄清一下。

在您的html文件下添加此脚本标记，或将其作为单独的js文件包含在内。经过测试，工作。

<script type="text/javascript">

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

</script>

更新客户端表

2 个答案: