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.");
}
});
});
これはどのように実装できますか？
行を完全に削除したいと思いました。多分あなたはそれを少し明確にする必要があります。
このスクリプトタグをhtmlファイルの下に追加するか、別のjsファイルとして含めます。テスト済み、動作中。
<script type="text/javascript">
$("#cancel").on("click", function() {
$('input:checked').each( function() {
$( this ).closest("tr").remove();
});
});
</script>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加