我正在创建一些学生的成绩卡，学生在下拉菜单中，当我想选择任何学生时，其他下拉菜单会自动选择该学生的数据。
另一点当我点击添加行时，它应该复制整行，然后我会选择另一个学生，结果应该显示。
这是我的代码，我卡住了。有什么问题需要帮助。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function){
var cloned=$("tagihan").html();
$(document).on("click", "tambah", function() {
console.log(cloned);
//$('#aaa').append(cloned);
$("#tagihan").appned(cloned)
});
var unit;
var toMove;
$(document).on("change". "unit", function(e){
//unit = $(this).closest('tr.detail_tagihan').("#unit").text();
unit=$(this).closest("tr").find(".unit").val();
$(this).closest("tr").find(".option-container").children().appendTo(".layanan");
toMove= $(this).closest("tr").find(".layanan"). children("[data-unit!='"+unit+"']");
toMove.appendTo(".option-container");
$(this).closest("tr").find(".layanan").removeAttr("disabled");
});
});
</script>
</head>
<body>
<div id="aaa"></div>
<table name="tagihan" class="table table-striped">
<thead>
<tr>
<th><b>Math</b></th>
<th><b>Computer</b></th>
<th><b>Physics</b></th>
<th><b>English</b></th>
<th colspan="2">
<b>
<Total marks>
</b>
</th>
</tr>
</thead>
<tbody id="tagihan">
<tr id="Total Marks" class="obtain marks">
<td>
<select>
<option value="Asad">Asad</option>
<option value="Adil">Adil</option>
<option value="AAmir">AAmir</option>
</select>
</td>
<select>
<td>
<option value="Science">Science</option>
< option value="Computer">Computer</option>
<option value="Physics">Physics</option>
<option value="English">English</option>
<
<select id="layanan" class=" layanan selectpicker show-tick form-control" data-live-search="true" disabled>
<option data-unit="Asad" value="23">23</option>
<option data-unit="Adil" value="25">25</option>
<option data-unit="Adil" value="33">33</option>
<option data-unit="Adil" value="34">34</option>
<option data-unit="AAmir" value="44">44</option>
<option data-unit="AAmir" value="45">45</option>
</select>
<span id="option-container" class = "option-container" style="visibility: hidden; position:absolute;"></span>
</td>
<td>
<input type="text" id="Keterangan" class=" Keterangan form-control" placeholder="Keterangan">
</td>
<td>
<input type="text" id="Harga" class="Harga form-control" placeholder="Harga">
</td>
<td>
<button type="button" class="btn btn-default tambah" >Tambah</button>
</td>
</tr>
</tbody>
</table>
</html>
这是错误的行：
$(document).ready(function){
更正：
$( document ).ready(function() {
以下是问题，需要更正html：
<select>
<td>
<option value="Science">Science</option>
< option value="Computer">Computer</option>
<option value="Physics">Physics</option>
<option value="English">English</option>
<
<select id="layanan" class=" layanan selectpicker show-tick form-control" data-live-search="true" disabled>
<option data-unit="Asad" value="23">23</option>
<option data-unit="Adil" value="25">25</option>
<option data-unit="Adil" value="33">33</option>
<option data-unit="Adil" value="34">34</option>
<option data-unit="AAmir" value="44">44</option>
<option data-unit="AAmir" value="45">45</option>
</select>
<span id="option-container" class = "option-container" style="visibility: hidden; position:absolute;"></span>
</td>
它应该是：
<td>
<select>
<option value="Science">Science</option>
<option value="Computer">Computer</option>
<option value="Physics">Physics</option>
<option value="English">English</option>
</select>
</td>
<td>
<select id="layanan" class=" layanan selectpicker show-tick form-control" data-live-search="true" disabled>
<option data-unit="Asad" value="23">23</option>
<option data-unit="Adil" value="25">25</option>
<option data-unit="Adil" value="33">33</option>
<option data-unit="Adil" value="34">34</option>
<option data-unit="AAmir" value="44">44</option>
<option data-unit="AAmir" value="45">45</option>
</select>
<span id="option-container" class = "option-container" style="visibility: hidden; position:absolute;"></span>
</td>
这是完整的解决方案：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var cloned = $("#results").html();
$(".subjects").trigger("click");
$(document).on("click", ".add", function() {
console.log(cloned);
//$('#aaa').append(cloned);
$("tbody#results").append( cloned );
});
var studentSelected;
var subjectSelected;
$(document).on("change", ".subjects", function() {
studentSelected = $(this).closest("tr").find(".students").val();
subjectSelected = $(this).val();
$(this).closest("tr").find(".students").removeAttr("disabled");
$(this).closest("tr").find(".obtain_marks").val(studentSelected+"-"+subjectSelected);
if( parseInt($(this).closest("tr").find(".obtain_marks").text()) >= 50) {
$(this).closest("tr").find(".result").val('Passed');
}else {
$(this).closest("tr").find(".result").val('Failed');
}
console.log(parseInt($(this).closest("tr").find(".obtain_marks").text()));
});
$(document).on("change", ".students", function() {
subjectSelected = $(this).closest("tr").find(".subjects").val();
studentSelected = $(this).val();
$(this).closest("tr").find(".students").removeAttr("disabled");
$(this).closest("tr").find(".obtain_marks").val(studentSelected+"-"+subjectSelected);
if( parseInt($(this).closest("tr").find(".obtain_marks").text()) >= 50 ) {
$(this).closest("tr").find(".result").val('Passed');
}else {
$(this).closest("tr").find(".result").val('Failed');
}
});
/**/
});
</script>
</head>
<body>
<div id="aaa"></div>
<table name="tagihan" class="table table-striped">
<thead>
<tr>
<th><b>Student Name</b></th>
<th><b>Subject</b></th>
<th><b>Obtain Marks</b></th>
<th >
<b>
Total Marks
</b>
</th>
<th><b>Result</b></th>
<th></th>
</tr>
</thead>
<tbody id="results">
<tr id="tagihanx">
<td>
<select class="students" >
<option value="Asad">Asad</option>
<option value="Adil">Adil</option>
<option value="AAmir">AAmir</option>
</select>
</td>
<td>
<select class="subjects" >
<option value="Science">Science</option>
<option value="Computer">Computer</option>
<option value="Physics">Physics</option>
<option value="English">English</option>
</select>
</td>
<td>
<select class=" obtain_marks form-control " data-live-search="true" disabled>
<option data-unit="Asad" value="Asad-Computer">53</option>
<option data-unit="Asad" value="Asad-Physics">43</option>
<option data-unit="Asad" value="Asad-English">33</option>
<option data-unit="Asad" value="Asad-Science">44</option>
<option data-unit="Adil" value="Adil-Computer">43</option>
<option data-unit="Adil" value="Adil-Physics">63</option>
<option data-unit="Adil" value="Adil-English">73</option>
<option data-unit="Adil" value="Adil-Science">44</option>
<option data-unit="AAmir" value="AAmir-Computer">66</option>
<option data-unit="AAmir" value="AAmir-Physics">44</option>
<option data-unit="AAmir" value="AAmir-English">77</option>
<option data-unit="AAmir" value="AAmir-Science">45</option>
</select>
</td>
<td>
<span class=" total_marks Keterangan form-control" placeholder="Keterangan"> 100 </span>
</td>
<td>
<input type="text" class="Harga form-control result" placeholder="result">
</td>
<td>
<button type="button" class="btn btn-default add" >add</button>
</td>
</tr>
</tbody>
</table>
</html>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句