admin管理员组

文章数量:1346672

I've been playing around with javascript/jquery, trying to get various bits of script to play nicely together (see for instance my recent question at Populate an input with the contents of a custom option (data-) attribute).

I've now got a clunky mass of code that kind of works. It's supposed to do 4 things:

  1. Populate a cascading dropdown, whereby the options in the second dropdown vary according to whatever was selected in the first dropdown.
  2. Clone the first row (or it could be the last row), so additional rows can be added to the form (in the real version there could be any number of rows when the page first loads)
  3. Keep a running total of values selected in a 3rd drop down
  4. Populate a text input based upon values selected in the second dropdown

For the first row everything works fine. However, for cloned rows steps 1 and 4 stop working. I suspect its because I haven't uniquely identified each cloned instance. Is that right? So how might I do that?

    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=".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>

I've been playing around with javascript/jquery, trying to get various bits of script to play nicely together (see for instance my recent question at Populate an input with the contents of a custom option (data-) attribute).

I've now got a clunky mass of code that kind of works. It's supposed to do 4 things:

  1. Populate a cascading dropdown, whereby the options in the second dropdown vary according to whatever was selected in the first dropdown.
  2. Clone the first row (or it could be the last row), so additional rows can be added to the form (in the real version there could be any number of rows when the page first loads)
  3. Keep a running total of values selected in a 3rd drop down
  4. Populate a text input based upon values selected in the second dropdown

For the first row everything works fine. However, for cloned rows steps 1 and 4 stop working. I suspect its because I haven't uniquely identified each cloned instance. Is that right? So how might I do that?

    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./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>

Apologies if I've inserted the snippet incorrectly.

  • javascript
  • jquery
Share Improve this question edited May 23, 2017 at 12:09 CommunityBot 11 silver badge asked Feb 21, 2016 at 12:30 StrawberryStrawberry 34k14 gold badges42 silver badges57 bronze badges 10
  • 1 simply ensure each id in a page is unique - you'll have far fewer issues to deal with – Jaromanda X Commented Feb 21, 2016 at 12:33
  • You can't have multiple elements with the same ID. – Michał Perłakowski Commented Feb 21, 2016 at 12:39
  • Yes. That's the part I'm struggling with. – Strawberry Commented Feb 21, 2016 at 22:53
  • It would help you to better conceptualize what you're acplishing as manipulating your data (myJson) and representing said data -- and its methods -- as HTML elements. Your code for manipulating myJson can then focus on generating valid data and your presentation layer can be generalized to generate list items and tasks. – Alfredo Delgado Commented Feb 23, 2016 at 13:49
  • You have a very good answer from Ian, so if you believe that's the way to go, I don't see any point adding another answer, ... but if you'd hope for a solution with as less libraries to load as possible (none actually), this can be done in plain javascript. The benefit would be the best feature of them all, if you ask me, page load speed, so if your plexity is not going to increase dramatically and there will not be thousands of rows, let me know and I will post you an answer. – Asons Commented Feb 25, 2016 at 9:24
 |  Show 5 more ments

7 Answers 7

Reset to default 11 +500

I'm going to go out on a limb and suggest something pletely different. I understand that your question was tagged with jQuery but I want to suggest a different and I believe better way of solving the problem.

I think here you're mixing your DOM and your JavaScript too much, and instead using a binding framework may be simpler. These binding frameworks split out your presentation from your underlying data. There are a number to chose from, here are but are just a few:

  • Angular
  • Knockout
  • React

I personally know Knockout fairly well, so here is how I'd create something similar to that which you've produced using Knockout. Here I've reduced your code by about 50% and I believe significantly improved the readability with the bonus that I've removed all DOM from the JavaScript

Note that it's really easy to get your JSON view (my structure might not exactly match yours but should give you the idea) by using the Knockout.mapping plugin and calling ko.toJS(vm.jobs)

var vm = {};

vm.projects = ko.observableArray([]);
vm.projects.push({
  id: 1001,
  name: "Project A",
  stages: [{ name: "folding", description: "folding stuff" }, 
           { name: "drawing", description: "drawing shapes" }]
});
vm.projects.push({
  id: 1002,
  name: "Project B",
  stages: [{ name: "meeting", description: "Talking" }, 
           { name: "admin", description: "everyday things" }]
});

vm.jobs = ko.observableArray([]);
vm.totalHours = ko.puted(function() {
  var sum = 0;
  for (var i = 0; i < vm.jobs().length; i++) {
    sum += vm.jobs()[i].time();
  }
  return sum;
})

createJob = function() {
  var job = {};

  // Set fields on the job
  job.project = ko.observable();
  job.stage = ko.observable();
  job.stages = ko.puted(function() {
    if (job.project()) return job.project().stages;
    return [];
  });
  job.stage.subscribe(function() {
    job.description(job.stage().description);
  });
  job.description = ko.observable();
  job.time = ko.observable(1);

  vm.jobs.push(job);
};

createJob();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare./ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<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' data-bind="value: totalHours" />
      </td>
      <td></td>
    </tr>
    <!-- ko foreach: jobs -->
    <tr id='myrow'>
      <td>
        <select class="project" data-bind="options: $root.projects, optionsText: 'name', value: project, optionsCaption: 'Select a Project'"></select>
      </td>
      <td>
        <select class="stage" data-bind="options: stages, value: stage, optionsText: 'name', optionsCaption: 'Select a Stage', enable: project()"></select>
      </td>
      <td>
        <select class="hours" data-bind="options: [1.0, 1.5, 2.0], value: time, enable: stage()"></select>
      </td>
      <td>
        <input type="text" data-bind="value: description, enable: stage()" />
      </td>
    </tr>
    <!-- /ko -->
  </table>
  <input type="button" onclick="createJob()" value="Add Row" />
</form>

The general idea here is that both the observable and the observableArray are bound to the DOM using Knockout. They'll automatically keep each other in sync.

The puted field is essentially a calculated field, so I've used that to generate your total, and also to feed one of the dropdowns - you could probably use a different approach but that seemed quite simple.

Finally there is a manual subscribe which is designed to update your default description for the job at hand. This allows you to update the field, without having to mess around with another observable or puted fields to override a description if the user set one.

As you've also had a problem with ID's for things, I'm also going to mention how you could address those. Using Knockout we could quite easily create client side unique ID's for our DOM using another puted field and returning it's order in the array:

job.id = ko.puted(function() {
   return vm.jobs.indexOf(job); 
});

You can then even reflect this in the DOM (note an ID can't start with a number) like so:

<td data-bind="attr: { id: 'job_' + id() }"></td>

This would produce DOM like:

<td id="job_0"></td>

That's a really dirty peace of code. I solved your problem in the same dirty style but I remend you to write everything pletely new in a proper style. I solved the problem by changing all id's to class attributes. And each row has it's own unique id.

	   var rowNum =1;
		
	   function cloneRow() {
		  var row = document.getElementById("row0"); // find row to copy
		  var table = document.getElementById("mytable"); // find table to append to
		  var clone = row.cloneNode(true); // copy children too
		  clone.id = "row"+rowNum; // change id or other attributes/contents
		  table.appendChild(clone); // add new row to end of table
		  initProject(clone.id);
		  rowNum++; 
		}

		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 initProject(rowId){
		
	console.log(rowId);
		if(rowId == 'row0'){
		 $.each(myJson.listItems, function (index, value) {
		  
			$("#"+rowId+" .project").append('<option value="'+value.id+'">'+value.project_no+'</option>');
		  });
		}
		$('#'+rowId+' .project').on('change', function(e){
			rowElem = e.target.closest(".row");
			
			
		 $('#'+rowId+' .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) {
				  $('#'+rowId+' .task').append('<option value="'+value.id+'" data-description="'+value.task_description+'">'+value.task_summary+'</option>');
			  });
			}
		  }
	  });
	  
	  $('#'+rowId+' .task').change(function() {
	  $('#'+rowId+' .taskText').val( $(this).find('option:selected').data('description') )
	})
	}
	initProject('row0');
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>

</head>
<body>
<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='row0' class="row">
	   <td>
					  <select class="project" name="">
						  <option value="">Select One</option>
						</select>
	</td><td>
					   <select class="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="" class="taskText" /></td>
	  </tr>
	 </table>
	   <input type="button" onclick="cloneRow()" value="Add Row" />
	</form>
  
  </body>

Another version with simple templating system, this time without the jquery.

It was interesting to see if it will be difficult to convert, and it wasn't, most of things to map jQuery code to plain JS for modern browsers can be found here - YOU MIGHT NOT NEED JQUERY

Here is the code:

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"
            }
         ]
      }
   ]
}

var template = function(target) {
  var _parent = target.parentNode;
  var _template = _parent.getAttribute('dataTemplate');
  if (!_template) {
    // no template yet - save it and remove the node from HTML
    target.style.display = '';
    target.classList.add('clone');
    _template = target.outerHTML;
    _parent.setAttribute('dataTemplate', JSON.stringify(_template));
    _parent.removeChild(target);
  } else {
    // use saved template
    _template = JSON.parse(_template);
  }
  return {
    populate: function(data) {
      var self = this;
      this.clear();
      data.forEach(function(value) {
        self.clone(value);
      });
    },
    clone: function(value) {
      var clone = target.cloneNode(true);
      _parent.appendChild(clone);
      var html = _template;
      if (value) {
        for (var key in value) {
          html = html.replace('{'+key+'}', value[key]);
        }
      }
      clone.outerHTML = html;
      clone = _parent.lastChild;
      if (value) {
        clone.setAttribute('dataTemplateData', JSON.stringify(value));
      }
      return clone;
    },
    clear: function() {
      var clones = _parent.querySelectorAll('.clone')
      Array.prototype.forEach.call(clones, function(el) {
        _parent.removeChild(el);
      });
    }
  };
};

function createRow() {
  var clone = template(document.querySelector('.myrow-template')).clone();
  template(clone.querySelector('.project-option-tpl')).populate(myJson.listItems);
  updateHours();
  bindEvents();
}

function bindEvents() {
  var elements = document.querySelectorAll('#mytable .project');
  Array.prototype.forEach.call(elements, function(elem) {
    elem.addEventListener('change', function() {
      var data = JSON.parse(this.options[this.selectedIndex].getAttribute('dataTemplateData'));
      template(this.parentNode.parentNode.querySelector('.task-option-tpl')).populate(data.task);
    });
  });
  elements = document.querySelectorAll('#mytable .task');
  Array.prototype.forEach.call(elements, function(elem) {
    elem.addEventListener('change', function() {
      var data = JSON.parse(this.options[this.selectedIndex].getAttribute('dataTemplateData'));
      this.parentNode.parentNode.querySelector('.task-text').value = data.task_description;
    });
  });
  elements = document.querySelectorAll('#mytable .hours');
  Array.prototype.forEach.call(elements, function(elem) {
    elem.addEventListener('mouseup', function() {
      updateHours();
    });
  });
}

function updateHours() {
  var total = 0;
  var hours = document.querySelectorAll('.hours');
  Array.prototype.forEach.call(hours, function(item) {
    if (item.parentNode.parentNode.style.display.length == 0) {
      total += parseFloat(item.value) || 0;
    }
  });
  document.getElementById('total').value = total;
}
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(function(){
  createRow();
  document.querySelector('.add-row').addEventListener('click', function() {
    createRow();
  });
});
    <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 class='myrow-template' style='display:none'>
                <td>
                    <select class="project" name="">
                        <option value="">Select One</option>
                        <option class='project-option-tpl' value="{id}" style='display:none'>{project_no}</option>
                    </select>
                </td>
                <td>
                    <select class="task" name="">
                        <option value="000">-Select Task-</option>
                        <option class='task-option-tpl' value="{id}" data-description="{task_description}" style='display:none'>{task_summary}</option>
                    </select>
                </td>
                <td>
                    <select class='hours'>
                        <option>1.0</option>
                        <option>1.5</option>
                        <option>2.0</option>
                    </select>
                </td>
                <td><input type="text" value="" class="task-text" /></td>
            </tr>
        </table>
        <input type="button" class="add-row" value="Add Row" />
    </form>

I upvoted the answer about Angular / Knokout / React - this is actually what I highly remend to use in the real application.

Just as an exercise, here is how the code can look like if you use a simple templating system.

The idea is that you should not build the javascript "manually" and instead declare the templates in the HTML. For example the projects select can look like this:

<select class="project" name="">                                                                 
    <option value="">Select One</option>                                                         
    <option class='project-option-tpl' value="{id}" style='display:none'>{project_no}</o
</select>

Here the option is an invisible template for project options. It works similar for the whole "row" and "tasks" select, here is the full code to implement the logic:

function createRow() {
  var $clone = template($('.myrow-template')).clone();
  template($clone.find('.project-option-tpl')).populate(myJson.listItems);
  updateHours();
}

function updateHours() {
  var total = 0;
  $('.hours:visible').each(function (index, item) {
    total += parseFloat($(item).val()) || 0;
  });
  $('#total').val(total);
}

$(function() {
  createRow();  // create the first row
  $('#mytable').on('change', '.project', function() {
    // handle project change - get tasks for the selected project
    // and populate the tasks template
    var data = $(this).find(':selected').data('template-data');
    template($(this).parent().parent().find('.task-option-tpl')).populate(data.task);
  });
  $('#mytable').on('change', '.task', function() {
    // task change - update the task description
    var data = $(this).find(':selected').data('template-data');
    $(this).parent().parent().find('.task-text').val(data.task_description);
  });
  $('#mytable').on('mouseup', '.hours',function() {
    updateHours(); // re-calculate total hours
  });
  $('.add-row').on('click', function() {
    createRow(); // add one more row
  });
});

The "magic" is implemented in the template function:

var template = function($target) {
  $target = $($target.get(0));
  return {
    populate: function(data) {
      // for each item in the data array - clone and populate the
      // item template
      var self = this;
      this.clear();
      $.each(data, function (index, value) {
        self.clone(value);
      });
    },
    clone: function(value) {
      // clone a template for a single item and populate it with data
      var $clone = $target.clone();
      $clone.addClass('clone').appendTo($target.parent()).fadeIn('slow');
      if (value) {
        var html = $clone.get(0).outerHTML;
        for (var key in value) {
          html = html.replace('{'+key+'}', value[key]);
        }
        $clone.get(0).outerHTML = html;
        $clone = $target.parent().find(':last')
        $clone.data('template-data', value);
      }
      return $clone;
    },
    clear: function() {
      // remove cloned templates
      $target.parent().find('.clone').remove();
    }
  };
};

Here is the full runnable example: 

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"
            }
         ]
      }
   ]
}

var template = function($target) {
  $target = $($target.get(0));
  return {
    populate: function(data) {
      var self = this;
      this.clear();
      $.each(data, function (index, value) {
        self.clone(value);
      });
    },
    clone: function(value) {
      var $clone = $target.clone();
      $clone.addClass('clone').appendTo($target.parent()).fadeIn('slow');
      if (value) {
        var html = $clone.get(0).outerHTML;
        for (var key in value) {
          html = html.replace('{'+key+'}', value[key]);
        }
        $clone.get(0).outerHTML = html;
        $clone = $target.parent().find(':last')
        $clone.data('template-data', value);
      }
      return $clone;
    },
    clear: function() {
      $target.parent().find('.clone').remove();
    }
  };
};

function createRow() {
  var $clone = template($('.myrow-template')).clone();
  template($clone.find('.project-option-tpl')).populate(myJson.listItems);
  updateHours();
}

function updateHours() {
  var total = 0;
  $('.hours:visible').each(function (index, item) {
    total += parseFloat($(item).val()) || 0;
  });
  $('#total').val(total);
}

$(function(){
  createRow();
  $('#mytable').on('change', '.project', function() {
    var data = $(this).find(':selected').data('template-data');
    template($(this).parent().parent().find('.task-option-tpl')).populate(data.task);
  });
  $('#mytable').on('change', '.task', function() {
    var data = $(this).find(':selected').data('template-data');
    $(this).parent().parent().find('.task-text').val(data.task_description);
  });
  $('#mytable').on('mouseup', '.hours',function() {
    updateHours();
  });
  $('.add-row').on('click', function() {
    createRow();
  });
});
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <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 class='myrow-template' style='display:none'>
                <td>
                    <select class="project" name="">
                        <option value="">Select One</option>
                        <option class='project-option-tpl' value="{id}" style='display:none'>{project_no}</option>
                    </select>
                </td>
                <td>
                    <select class="task" name="">
                        <option value="000">-Select Task-</option>
                        <option class='task-option-tpl' value="{id}" data-description="{task_description}" style='display:none'>{task_summary}</option>
                    </select>
                </td>
                <td>
                    <select class='hours'>
                        <option>1.0</option>
                        <option>1.5</option>
                        <option>2.0</option>
                    </select>
                </td>
                <td><input type="text" value="" class="task-text" /></td>
            </tr>
        </table>
        <input type="button" class="add-row" value="Add Row" />
    </form>

See the other answers why the current code is not working as expected. (in short: id may only appear once).

I took some time and reorganized your code. As for me personally it doesn't look that maintainable. I did use objects to neaten things up a bit. You could also use a framework like angular etc. But JavaScript in it self can also be really nice. And probably is good enough for something that small.

Some notes:

  • The first row in my example is display:none and called template (this way we always have a "clean" template ready to use). You could have this template only in Javascript and insert it on demand, but this way will help you to quickly edit the design.
  • There are 4 groups in my code
    • The data (myjson)
    • The table object declaration (this way you could also create multiple tables)
    • The row object declaration
    • The init preparation
  • The prototype is useful because it doesn't duplicate the code for each row (object). So every select will execute the same function. But since we use objects each time we have different data.
  • Some functions have something like hours.click(function(){tableElement.updateTime()}); this inner function is necessary as it keeps the scope of the function to the object and not the click event. Normally when you catch a click event and set a function, then in this function this is the click event. I used objects, so this should be the object and not the event.

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"
    }]
  }]
};

/*
  Table
*/
function projectPlan(tableElement) { // Constructor
  this.tableElement = tableElement;
  this.totalTimeElement = tableElement.find('tr td input.total');
  this.rows = [];
};

projectPlan.prototype.appendRow = function(template) { // you could provide different templates
  var newRow = template.clone().toggle(); // make a copy and make it visible
  this.tableElement.append(newRow);
  this.rows.push( new workRow(newRow, this) );
  
  // update the time right away
  this.updateTime();
};

projectPlan.prototype.updateTime =  function() {
  var totalWork = 0;
  for(var i = 0; i < this.rows.length; i++) totalWork += this.rows[i].hours.val()*1; // *1 makes it a number, default is string
  this.totalTimeElement.val(totalWork);
};

/*
  Row
*/
function workRow(rowElement, tableElement) { // Constructor
    // set the object attributes with "this"
    this.rowElement = rowElement;
    this.tableElement = tableElement;
    this.projects = rowElement.find( "td select.projects" );
    this.tasks = rowElement.find( "td select.tasks" );
    this.hours = rowElement.find( "td select.hours" );
    this.taskText = rowElement.find( "td input.taskText" );
  
    // set all the event listeners, don't use this since the "function(){" will have a new scope
    var self = this;
    this.projects.change(function(){self.updateTasks()});
    this.tasks.change(function(){self.updateTaskText()});
    this.hours.change(function(){tableElement.updateTime()});
  
}

workRow.prototype.updateTasks =  function() {
  // delete the old ones // not the first because it's the title
  this.tasks.find('option:not(:first-child)').remove();
  
  if(this.projects.val() != "-1") {
    var tmpData;
    for (var i = 0; i < myJson.listItems[this.projects.val()].task.length; i++) {
      tmpData = myJson.listItems[this.projects.val()].task[i];
      this.tasks.append('<option value="' + i + '">' + tmpData.task_summary + '</option>');
    }
  }
  
  this.taskText.val('');
  
}

workRow.prototype.updateTaskText =  function() {
  if(this.tasks.val() == "-1") this.taskText.val('');
  else this.taskText.val( myJson.listItems[ this.projects.val() ].task[ this.tasks.val() ].task_description );
  
}

/* 
  Setup 
*/

// Prepare the template (insert as much as possible now)
rowTemplate = $('#rowTemplate');
var projectList = rowTemplate.find( "td select.projects" );
var tmpData;
for (var i = 0; i < myJson.listItems.length; i++) {
  tmpData = myJson.listItems[i];
  projectList.append('<option value="' + i + '">' + tmpData.project_no + '</option>');
}

// setup table
var projectPlan = new projectPlan( $('#projectPlan') );

// Print the first row
projectPlan.appendRow(rowTemplate);
$('#buttonAddRow').click(function(){ projectPlan.appendRow(rowTemplate) });
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table id="projectPlan">
    <tr>
      <td>Project</td>
      <td>Workstage</td>
      <td>Hours</td>
      <td>Description</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td><input size=3 class='total' disabled='disabled' /></td>
      <td></td>
    </tr>
    
    <tr id='rowTemplate' style="display:none">
      
      <td>
        <select class="projects">
           <option value="-1">Select One</option>
        </select>
      </td>
      <td>
        <select class="tasks">>
           <option value="-1">Select One</option>
        </select>
      </td>
      <td>
        <select class='hours'>
         <option>1.0</option>
         <option>1.5</option>
         <option>2.0</option>
        </select>
      </td> 
      <td>
        <input class="taskText" type="text"/>
      </td>
      
    </tr>
    
  </table>
  <input type="button" id="buttonAddRow" value="Add Row" />
</form>

And angular.js version, here is the plete application code, the rest is declared in the HTML:

angular.module('MyApp', [])
   .controller('TasksController', function() {
     var self = this;
     this.newRow = function() {
       return { project: null, task: null, hours: 1.0 };
     };
     this.total = 0;
     this.hours = [1.0, 1.5, 2.0];
     this.projects = projects;
     this.rows = [ this.newRow() ];
     this.total = function() {
       return this.rows.reduce(function(prev, curr) {
         return prev + parseFloat(curr.hours);
       }, 0);
     };
     this.addRow = function() {
       this.rows.push(this.newRow());
     };
   });

The full code:

var projects = [{
   "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"
      } ]
}];

 angular.module('MyApp', [])
   .controller('TasksController', function() {
     var self = this;
     this.newRow = function() {
       return { project: null, task: null, hours: 1.0 };
     };
     this.total = 0;
     this.hours = [1.0, 1.5, 2.0];
     this.projects = projects;
     this.rows = [ this.newRow() ];
     this.total = function() {
       return this.rows.reduce(function(prev, curr) {
         return prev + parseFloat(curr.hours);
       }, 0);
     };
     this.addRow = function() {
       this.rows.push(this.newRow());
     };
   });
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="MyApp">
    <form ng-controller="TasksController as ctrl">
        <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' value="{{ctrl.total()}}" disabled='disabled'/></td>
                <td></td>
            </tr>
            <tr ng-repeat="row in ctrl.rows">
                <td>
                    <select ng-model="row.project" ng-options="project as project.project_no for project in ctrl.projects">
                        <option value="">Select One</option>
                    </select>
                </td>
                <td>
                    <select ng-model="row.task" ng-options="task as task.task_summary for task in row.project.task">
                        <option value="">Select Task</option>
                    </select>
                </td>
                <td>
                  <select ng-model='row.hours' ng-options="hour as (hour | number : 1) for hour in ctrl.hours">
                    </select>
                </td>
                <td><input type="text" value="{{row.task.task_description}}" class="task-text" /></td>
            </tr>
        </table>
        <input type="button" ng-click="ctrl.addRow()" value="Add Row" />
    </form>
</body>

Here is a version using plain javascript, which doesn't need/use element id's, store the clone as a variable, disabled task select unless a project is chosen.

This code sample can of course be optimized, wrapped in to classes etc. though I chose not to, to make it as easy as possible to follow the code flow and see what's going on.

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"
            }
          ]
        }
      ]
    }

var template = function(target) {
  return {
  
    clone: function(value) {
      if (!template.clone_item) {
        
        // create clone variable
        template.clone_item = target.cloneNode(true);
        
        return target;
      } else {
        
        // return/append clone variable
        return target.parentNode.appendChild(template.clone_item.cloneNode(true));
      }
    },
    
    init: function(value) {

      // first select (projects)        
      var sel = target.querySelector('select');
      sel.addEventListener('change', function() {

        // second select (tasks)
        var sel = target.querySelectorAll('select')[1];
        sel.addEventListener('change', function() {

          var selvalues = this.options[this.selectedIndex].value.split('|');
          var data = value[selvalues[0]].task[selvalues[1]].task_description;

          // last inout (tasks descript.)        
          var inp = target.querySelector('input');
          inp.value = data;

        });

        // clear last used task select options
        for (i=sel.length-1;sel.length >1;i--) {
          sel.remove(i);
        }

        // clear last used task descript.
        var inp = target.querySelector('input');
        inp.value = '';

        // disable task select
        sel.disabled = true;

        // add task select options
        var selvalue = this.options[this.selectedIndex].value;
        if (selvalue != '') {
          sel.disabled = false;
          var data = value[selvalue].task;
          var index = 0;
          for (var key in data) {
            createOption(sel,selvalue + '|' + index++,data[key].task_summary);
          }
        }

      });
      var index = 0;

      // add project select options
      for (var key in value) {
        createOption(sel,index++,value[key].project_no);
      }

      // hours
      var inp = target.querySelector('.hours');
      inp.addEventListener('change', function() {
        updateHours();
      });
      updateHours();
        
    }
  };
};

function createRow() {
  var clone = template(document.querySelector('.myrow')).clone();
  template(clone).init(myJson.listItems);
}

function createOption(sel,val,txt) {
  var opt = document.createElement('option');
  opt.value = val;
  opt.text = txt;
  sel.add(opt);
}

function updateHours() {
  var total = 0;
  var hours = document.querySelectorAll('#mytable .hours');
  for (i = 0; i < hours.length;i++) {
    total += parseFloat(hours[i].value) || 0;
  }
  document.getElementById('total').value = total;  
}

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(function(){
  createRow();
  document.querySelector('.add-row').addEventListener('click', function() {
    createRow();
  });
});
<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 class='myrow'>
      <td>
        <select class="project" name="">
          <option value="">Select One</option>
        </select>
      </td>
      <td>
        <select class="task" name="" disabled=disabled>
          <option value="000">-Select Task-</option>
        </select>
      </td>
      <td>
        <select class='hours'>
          <option>1.0</option>
          <option>1.5</option>
          <option>2.0</option>
        </select>
      </td>
      <td><input type="text" value="" class="task-text" /></td>
    </tr>
  </table>
  <input type="button" class="add-row" value="Add Row" />
</form>

本文标签： javascriptPersuading scripts to play nicely togetherStack Overflow

版权声明：本文标题：javascript - Persuading scripts to play nicely together - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743828277a2546047.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。