2017-08-17 24 views
0

夜晚全部。 我在這裏有一個問題。我有一張由javascript函數創建的表格。在該表中,每行包含checkboxthead也包含checkbox。我已將checkbox的ID分別用於每行使用ID mycheckboxthead使用ID mycheckbox1如何選中並取消選中一個複選框,然後在表格的最後一列創建一列

現在可以解決問題了。 我必須儘量使我的所有複選框都可以用thead中的複選框進行檢查,其編號爲mycheckbox1。我嘗試了許多我發現的代碼。但沒人工作。我設法讓與我手動創建HTML表格中的小提琴,我可以檢查所有的texboxt,它做工精細這樣的小提琴https://jsfiddle.net/minervaz/29fnt79f/1/

但是當我嘗試使用我的網頁不能正常工作 這是我創建

$(document).ready(function(){ 
 
\t 
 
    $('#submit-file').on("click",function(e){ 
 
\t \t if ($('#files').val()== "") 
 
\t \t { 
 
\t \t \t alert("Anda Harus Memasukkan File Terlebih Dahulu"); 
 
\t \t } 
 
\t \t else{ 
 
\t \t e.preventDefault(); 
 
\t \t $('#files').parse({ 
 
\t \t \t config: { 
 
\t \t \t \t delimiter: "", 
 
\t \t \t \t skipEmptyLines: false, 
 
\t \t \t \t complete: displayHTMLTable, 
 
\t \t \t }, 
 
\t \t \t before: function(file, inputElem) 
 
\t \t \t { 
 
\t \t \t \t //console.log("Parsing file...", file); 
 
\t \t \t }, 
 
\t \t \t error: function(err, file) 
 
\t \t \t { 
 
\t \t \t \t //console.log("ERROR:", err, file); 
 
\t \t \t }, 
 
\t \t \t complete: function() 
 
\t \t \t { 
 
\t \t \t \t //console.log("Done with all files"); 
 
\t \t \t } 
 
\t \t }); 
 
\t \t } 
 
    }); 
 
\t 
 
\t function displayHTMLTable(results) { 
 
    var table = "<table class='table table-bordered' width='90%'>"; 
 
    var data = results.data; 
 
    var size = -1; 
 
\t var check = 7; 
 
    var header = "<thead><tr>"; 
 
    header+= "<th width='120'>Kode Material</th>"; 
 
    header+= "<th width='140'>Storage Location</th>"; 
 
    header+= "<th width='130'>Movement Type</th>"; 
 
    header+= "<th width='130'>Id Indentifier</th>"; 
 
    header+= "<th width='120'>Date Input</th>"; 
 
    header+= "<th width='80'>Netto</th>"; 
 
    header+= "<th width='50'>Unit</th>"; 
 
\t header+= "<th width='80'>Payroll</th>"; 
 
    header+= "<th><input type='checkbox' id='mycheckbox1' name='mycheckbox1' ></th>"; 
 
    header+= "</tr></thead>"; 
 
    table += header; 
 
    table+="<tbody>"; 
 
    for (i = 1; i < data.length; i++) { 
 
     table += "<tr>"; 
 
     var row = data[i]; 
 
     var cells = row.join(",").split(","); 
 
     if (cells.length < size) continue; 
 
     else if (cells.length > size) size = cells.length; 
 
\t \t if (cells.length > check){ 
 
\t \t \t alert('Data Yang Anda Masukkan Salah'); 
 
\t \t } 
 
\t \t else{ 
 
     for (j = 0; j < cells.length; j++) { 
 
\t \t var a = 1.000; 
 
     \t var b = 10.000; 
 
     \t var c = 20.000; 
 
     \t var d = 45.000; 
 

 
     \t var callback1 = '10.000'; 
 
     \t var callback2 = '20.000'; 
 
     \t var callback3 = '37.500'; 
 
     \t var callback4 = '45.000'; 
 
     \t table += "<td>"; 
 
     table += cells[j]; 
 
     table += "</td>"; 
 
\t \t } 
 
\t \t if (cells[5]> a && cells[5] <b){ 
 
\t \t \t table += "<td>"+ callback1 +"</td>" 
 
\t \t } 
 
\t \t else if (cells[5]> b && cells[5] <c){ 
 
\t \t \t table += "<td>"+ callback2 +"</td>" 
 
\t \t } 
 
\t \t else if (cells[5]> c && cells[5] <d){ 
 
\t \t \t table += "<td>"+ callback3 +"</td>" 
 
\t \t } 
 
\t \t table += "<td><input type='checkbox' id='mycheckbox' name='mycheckbox'></td>" 
 
     table += "</tr>"; 
 
\t \t } 
 
    } 
 
    table+="</tbody>"; 
 
    table += "</table>"; 
 
    $("#parsed_csv_list").html(table); 
 
\t 
 
} 
 

 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.5/papaparse.min.js"></script> 
 
<div class="container" style="padding:5px 5px; margin-left:5px"> 
 
\t <div class="well" style="width:70%"> 
 
\t \t <div class="row"> 
 
\t \t <form class="form-inline"> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t <label for="files">Upload File Data :</label> 
 
\t \t \t <input type="file" id="files" class="form-control" accept=".csv" required /> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t <button type="submit" id="submit-file" class="btn btn-primary">Upload File</button> 
 
\t \t \t </div> 
 
\t \t </form> 
 
\t \t </div> 
 
\t </div> 
 
    <div class="row" style="width:90%"> 
 
\t \t \t <form action="" id="form_data" name="form_data" method="post"> 
 
\t \t \t <div id="parsed_csv_list" class="panel-body table-responsive" style="width:90%"> 
 
\t \t \t </div> 
 
      </form> 
 
\t \t </div>

後,我可以檢查我的複選框,我想打一個新的ththead的最後一行中的表和最後一行中的代碼的每一個tbody。 該列的值在檢查時爲Tilting,未選中時爲Borongan

你可以在這個環節 https://drive.google.com/open?id=0B_zAPPvH-idZZkxSRDI4NGNHOHc

+0

你原來的代碼片段不填充表,請修復它 –

+0

我編輯了我所有的代碼..它工作片段 –

回答

0

您所遇到的問題下載CSV文件是要設置更改事件不存在在結合當時的元素,所以你必須將其設置在存在的元素上。我可以給你答案,但不會長run.As幫我不是一個很善於解釋概念,我將只是指向你,你與答案在它遇到的問題 -

jQuery .on('change', function() {} not triggering for dynamically created inputs

第二部分研究更多。 (也我不明白)

相關問題