Question

所有的夜晚。我在这里有一个问题。我有一个由javascript函数创建的表。在该表中，每行包含checkbox，thead也包含checkbox。我已为每行使用ID checkbox和mycheckbox使用ID thead分隔了mycheckbox1的ID。

现在好了解问题。我必须尝试使用标识为thead的{{1}}中的复选框来检查我的所有复选框。我尝试了很多我发现的代码。但没有人工作。我尝试用一个用HTML手动创建的表来制作一个小提琴，我可以检查所有的texboxt，它可以像这个小提琴一样工作https://jsfiddle.net/minervaz/29fnt79f/1/

但是当我尝试在我的页面中使用它时，它无法正常工作这是我创建的表的代码

＆＃13;

mycheckbox1

＆＃13;

$(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);
	
}   

});

＆＃13;

我可以选中我的复选框后，我想在<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>的最后一行和每个th的最后一行中创建一个新的thead列。检查时列的值为tbody，未选中时为Tilting。

您可以在此链接中下载csv文件 https://drive.google.com/open?id=0B_zAPPvH-idZZkxSRDI4NGNHOHc

Answer 1

您遇到的问题是您将更改事件设置为的元素在绑定时不存在，因此您必须将其设置在存在的元素上。我可以给你答案，但从长远来看这无济于事。由于我不太擅长解释概念，我只会指出你遇到的问题 -

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

第二部分研究更多。（我也不明白）

如何选中和取消选中复选框，然后在表

1 个答案: