【发布时间】：2016-02-21 12:30:38
【问题描述】：
我一直在玩 javascript/jquery，试图让各种脚本很好地结合在一起（例如，请参阅我最近在Populate an input with the contents of a custom option (data-) attribute 提出的问题）。
我现在有一大堆可以工作的笨重代码。它应该做 4 件事：
- 填充级联下拉列表，其中第二个下拉列表中的选项会根据第一个下拉列表中选择的内容而有所不同。
- 克隆第一行（也可以是最后一行），因此可以在表单中添加额外的行（在实际版本中，页面首次加载时可以有任意数量的行）
- 保持在第三个下拉列表中选择的值的运行总计
- 根据在第二个下拉列表中选择的值填充文本输入
第一行一切正常。但是，对于克隆的行，步骤 1 和 4 停止工作。我怀疑它是因为我没有唯一标识每个克隆实例。那正确吗？那我该怎么做呢？
function cloneRow() {
var row = document.getElementById("myrow"); // find row to copy
var table = document.getElementById("mytable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "newID"; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
}
function createRow() {
var row = document.createElement('tr'); // create row node
var col = document.createElement('td'); // create column node
var col2 = document.createElement('td'); // create second column node
row.appendChild(col); // append first column to row
row.appendChild(col2); // append second column to row
col.innerHTML = "qwe"; // put data in first column
col2.innerHTML = "rty"; // put data in second column
var table = document.getElementById("tableToModify"); // find table to append to
table.appendChild(row); // append row to table
}
window.sumInputs = function() {
var inputs = document.getElementsByName('hours'),
result = document.getElementById('total'),
sum = 0;
for(var i=0; i<inputs.length; i++) {
var ip = inputs[i];
if (ip.name && ip.name.indexOf("total") < 0) {
sum += parseFloat(ip.value) || 0;
}
}
result.value = sum;
}
var myJson =
{
"listItems":[
{
"id":"1",
"project_no":"1001",
"task":[
{
"task_description":"Folding stuff",
"id":"111",
"task_summary":"Folding",
},
{
"task_description":"Drawing stuff",
"id":"222",
"task_summary":"Drawing"
}
]
},
{
"id":"2",
"project_no":"1002",
"task":[
{
"task_description":"Meeting description",
"id":"333",
"task_summary":"Meeting"
},
{
"task_description":"Administration",
"id":"444",
"task_summary":"Admin"
}
]
}
]
}
$(function(){
$.each(myJson.listItems, function (index, value) {
$("#project").append('<option value="'+value.id+'">'+value.project_no+'</option>');
});
$('#project').on('change', function(){
$('#task').html('<option value="000">-Select Task-</option>');
for(var i = 0; i < myJson.listItems.length; i++)
{
if(myJson.listItems[i].id == $(this).val())
{
$.each(myJson.listItems[i].task, function (index, value) {
$("#task").append('<option value="'+value.id+'" data-description="'+value.task_description+'">'+value.task_summary+'</option>');
});
}
}
});
});
$('#task').change(function() {
$('#taskText').val( $(this).find('option:selected').data('description') )
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<form>
<table id='mytable'>
<tr>
<td>Project</td>
<td>Workstage</td>
<td>Hours</td>
<td>Description</td>
</tr>
<tr>
<td></td>
<td></td>
<td><input size=3 id='total' disabled='disabled'/></td>
<td></td>
</tr>
<tr id='myrow'>
<td>
<select id="project" name="">
<option value="">Select One</option>
</select>
</td><td>
<select id="task" name="" onchange="updateText('task')">>
<option value="">Select One</option>
</select>
</td>
<td>
<select name = 'hours' onmouseup="sumInputs()">
<option>1.0</option>
<option>1.5</option>
<option>2.0</option>
</select>
<td><input type="text" value="" id="taskText" /></td>
</tr>
</table>
<input type="button" onclick="cloneRow()" value="Add Row" />
</form>抱歉，如果我错误地插入了 sn-p。
【问题讨论】：
-
只需确保页面中的每个
id都是唯一的 - 您需要处理的问题要少得多 -
您不能有多个具有相同 ID 的元素。
-
是的。这就是我正在努力解决的部分。
-
它将帮助您更好地将您正在完成的工作概念化为操作数据 (myJson) 并将所述数据及其方法表示为 HTML 元素。然后，您用于操作 myJson 的代码可以专注于生成有效数据，并且可以泛化您的表示层以生成列表项和任务。
-
您从伊恩那里得到了很好的回答，所以如果您认为这是要走的路，我认为添加另一个答案没有任何意义，...但是如果您希望找到解决方案加载尽可能少的库（实际上没有），这可以用纯 JavaScript 完成。如果你问我页面加载速度，好处将是它们中最好的功能，所以如果你的复杂性不会显着增加并且不会有数千行，请告诉我，我会给你一个答案。
标签： javascript jquery