更新客戶端表

我正在從csv文件中讀取數據並以屏幕上的表格形式顯示它。我在每行之前都有複選框，'ID'保存爲相應複選框的值。現在我想用 '檢查' 從顯示的表複選框上點擊按鈕刪除字段 - 取消/保存更新客戶端表

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

    }); 
});

這如何實現？

來源

2016-09-30 harryOsborn

我假設你要刪除的行完全。也許你應該澄清一點。

將此腳本標記添加到您的html文件中，或將其包含爲一個單獨的js文件。測試過，工作。

<script type="text/javascript"> 

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

</script>

來源

2016-09-30 08:02:14 Kartal

你說得對。我想完全刪除這些行。對不起，缺乏這種清晰度。我嘗試使用你的腳本，但不知何故它不工作。你有沒有試過我的代碼並進行測試？確切地說，是 – harryOsborn

。見[link]（http://codepen.io/anon/pen/VKzqxx） – Kartal

明白了。謝謝！ – harryOsborn

要刪除checked複選框，您可以使用jQuery。結合當

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

在jQuery checked selector看一看，特別是：

只刪除複選框：

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

要做到這一點「上提交」的東西，就像一個按鈕點擊它與.is() function。

像@Kartal答案，但沒有.each() method您可以從表中刪除所有選中的行，像這樣：

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

的>選擇是described here

來源

2016-09-30 07:58:27 Nukeface

謝謝！ – harryOsborn

更新客戶端表

回答

相關問題