javascriptのグリッド上にチェックされた行のIDを取得する

Question

各行の前にチェックボックスと一緒にcsvファイルからデータを取得したグリッドを表示しています。また、チェックボックスのvalueプロパティに一意のIDを保存しています。今度は、「キャンセル」ボタンをクリックすると、alert（）内のチェックされたすべてのチェックボックスのIDの値を取得します。

HTML-

<div class="panel panel-primary"> 
    <div class="panel-heading">DIS Automation</div> 
    <div class="panel-body"> 
     <div class="field_row"> 
      <input type="file" accept=".csv" id="fileUpload" name="fileUpload1" /> 
     </div> 
     <br /> 
     <div class="field_row"> 
      <div class="col-lg-12"> 
       <div class="form-group"> 
        <center><div class="col-lg-3"><div class="input-append" id="filterDev" style="visibility: hidden"> 
         <input name="search" id="inputFilter" placeholder="Enter comma separated ID" /> 
         <input type="button" value="Filter" id="filter" class="btn btn-primary" /> 
        </div></div></center> 
        <div class="col-lg-6"></div> 
        <input type="button" id="upload" value="Upload" class="btn btn-primary" /> 
        <input type="button" id="cancel" value="Cancel/Save" style="visibility: hidden" class="btn btn-primary" /> 
        <input type="button" id="process" value="Process" style="visibility: hidden" class="btn btn-primary" /> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-lg-12"> 
        <div class="panel panel-default" style="align-self: center"> 
         <div class="panel-body" style=" max-height:600px; min-height: 400px; overflow-y: scroll;"> 

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

     <div class="row"> 
      <div class="col-sm-12"> 
       <p id="download" style="color: cornflowerblue; visibility: hidden"><strong>Please click the below links to download the processed file..</strong></p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <div class="col-sm-3"> 
        <p id="File1" style="color: cornflowerblue; text-decoration: underline; visibility: hidden"><a href="Files/CommitteeMembers.xlsx">File1 Download</a></p> 
       </div> 
       <div class="col-sm-3"> 
        <p id="File2" style="color: cornflowerblue; text-decoration: underline; visibility: hidden"><a href="Files/GSD_Offering_Completion.csv">File2 Download</a></p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

<script type="text/javascript"> 

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

     }); 
    }); 


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

      document.getElementById("File1").style.visibility = "visible"; 
      document.getElementById("File2").style.visibility = "visible"; 
      document.getElementById("download").style.visibility = "visible"; 

     }); 

    }); 

    $("#filter").click(function() { 
     ids = $("#inputFilter").val(); 
     if (ids != "") { 
      idsArray = ids.split(","); 
      $("#my-table tr:gt(0)").hide(); 
      $.each(idsArray, function (i, v) { 
       $("#my-table tr[data-id=" + v + "]").show(); 
      }) 
     } else { 
      $("#my-table tr").show(); 
     } 
    }); 


    /* $("#File1").click(function() { 
      window.location = "Files/CommitteeMembers.xlsx"; 
     }); 
     $("#File1").click(function() { 
      window.location = "Files/GSD_Offering_Completion.xlsx"; 
     });*/ 

</script> 

Javascript-

$(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 id='name'/>"); 
        var lines = e.target.result.split("\n"); 
        //alert(lines); 
        var result = []; 


        var headers = lines[0].split(","); 
        for (var i = 1; i < headers.length; i++) { 
         var header = headers[i]; 
         header = header.replace(/(\r\n|\n|\r)/gm, ""); 
         headers[i] = header; 
        } 



        for (var i = 1; i < lines.length; i++) { 
         var obj = {}; 
         var currentline = lines[i].split(","); 
         //alert(currentline); 

         for (var j = 0; j < headers.length; j++) { 
          obj[headers[j]] = currentline[j]; 
          //alert(obj[headers[j]]); 
         } 
         result.push(obj); 
         //alert(JSON.stringify(result)); 
        } 

        //alert(result[0].NAME + ' '+ result[0].ADDRESS+" "+result[0].CITY); 
        populateTable(result); 
        document.getElementById("cancel").style.visibility = "visible"; 
        document.getElementById("process").style.visibility = "visible"; 
        document.getElementById("filterDev").style.visibility = "visible"; 
       } 
       reader.readAsText($("#fileUpload")[0].files[0]); 
      } 

     } 

    }); 
}); 

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

     document.getElementById("File1").style.visibility = "visible"; 
     document.getElementById("File2").style.visibility = "visible"; 

    }); 

}); 

function populateTable(finalObject) { 

    var obj = finalObject; 
    var table = $("<table id='my-table' />"); 
    table[0].border = "1"; 
    var columns = Object.keys(obj[0]); 
    columns.unshift(''); 
    //alert(columns); 
    var columnCount = columns.length; 
    var row = $(table[0].insertRow(-1)); 


    for (var i = 0; i < columnCount; i++) { 
     var headerCell = $("<th />"); 
     headerCell.html([columns[i]]); 
     row.append(headerCell); 
    } 

    $.each(obj, function (i, obj) { 

     row = '<tr data-id="' + obj.ID + '"><td><input type="checkbox" value='+obj.ID+'/></td> 
     table.append(row); 
    }); 


    var dvTable = $("#dvCSV"); 
    dvTable.html(""); 
    dvTable.append(table); 

} 

どのようにこれを実装することができますか？

Answer 1

これは、あなたがそれを行うことができる方法のサンプルコードは次のようになります。そのため

$(".btnCancel").click(function(){ 
    var alertText=""; 
    $("[type='checkbox']:checked").each(function(){ 
     alertText+= $(this).attr("value") + " "; 
    }); 

    alert(alertText); 
}); 

Here is the JSFiddle demo