Night all. I have a question here. I have a table that created by javascript
function I made. In that table contain a checkbox
in each row and the thead
has the checkbox
too. I have separate the id's of the checkbox
for the each row use id mycheckbox
and for the thead
use id mycheckbox1
.
OK now to the problem. I have to try to make all of my checkbox can be checked with the checkbox in the thead
with id mycheckbox1
. I have try many code that I have found. But no one working. And I try make a fiddle with a table that I manually created with HTML and I can check all the texboxt and it work fine like this fiddle https://jsfiddle.net/minervaz/29fnt79f/1/
But when I try to use that in my page it can't work this is the code for the table that I have created
$(document).ready(function(){ $('#submit-file').on("click",function(e){ if ($('#files').val()== "") { alert("Anda Harus Memasukkan File Terlebih Dahulu"); } else{ e.preventDefault(); $('#files').parse({ config: { delimiter: "", skipEmptyLines: false, complete: displayHTMLTable, }, before: function(file, inputElem) { //console.log("Parsing file...", file); }, error: function(err, file) { //console.log("ERROR:", err, file); }, complete: function() { //console.log("Done with all files"); } }); } }); function displayHTMLTable(results) { var table = "<table class='table table-bordered' width='90%'>"; var data = results.data; var size = -1; 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>"; 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; if (cells.length > check){ alert('Data Yang Anda Masukkan Salah'); } else{ for (j = 0; j < cells.length; j++) { var a = 1.000; var b = 10.000; var c = 20.000; var d = 45.000; var callback1 = '10.000'; var callback2 = '20.000'; var callback3 = '37.500'; var callback4 = '45.000'; table += "<td>"; table += cells[j]; table += "</td>"; } if (cells[5]> a && cells[5] <b){ table += "<td>"+ callback1 +"</td>" } else if (cells[5]> b && cells[5] <c){ table += "<td>"+ callback2 +"</td>" } else if (cells[5]> c && cells[5] <d){ table += "<td>"+ callback3 +"</td>" } table += "<td><input type='checkbox' id='mycheckbox' name='mycheckbox'></td>" table += "</tr>"; } } table+="</tbody>"; table += "</table>"; $("#parsed_csv_list").html(table); } });
<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"> <div class="well" style="width:70%"> <div class="row"> <form class="form-inline"> <div class="form-group"> <label for="files">Upload File Data :</label> <input type="file" id="files" class="form-control" accept=".csv" required /> </div> <div class="form-group"> <button type="submit" id="submit-file" class="btn btn-primary">Upload File</button> </div> </form> </div> </div> <div class="row" style="width:90%"> <form action="" id="form_data" name="form_data" method="post"> <div id="parsed_csv_list" class="panel-body table-responsive" style="width:90%"> </div> </form> </div>
After I can checked my checkbox I want to make a new th
column in the last row of the thead
and in the last row of the each tbody
. The value of the column is Tilting
when it checked and Borongan
when unchecked.
for the csv file you can download in this link https://drive.google.com/open?id=0B_zAPPvH-idZZkxSRDI4NGNHOHc
The problem you are having is the element you are setting change event to is not present at the time of binding, so you will have to set it on a element which is present. I could give you the answer but that won't help in long run.As I am not a very good at explaining concepts I will just point you to the problem you are having with answer in it -
jQuery .on('change', function() {} not triggering for dynamically created inputs
For second part research more. (Also I did not understand)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.