noodlehaus/sample-use-jq-ddeditable.html

## sample-use-jq-ddeditable.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.edit {
  padding-left: 18px;
  background: #ff6 url(http://www.famfamfam.com/lab/icons/silk/icons/table_edit.png) 0 0 no-repeat;
  cursor: pointer;
}
</style>
</head>
<body>

<div><span id="host1">mysql1</span>.protego.com</div>
<div><span id="host2">mysqla</span>.protego.com</div>
<div><span id="host3">mysqli</span>.protego.com</div>
<div><span id="host4">mysqlx</span>.protego.com</div>

</body>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="jquery-ddeditable.js"></script>
<script>
$(function () {

  var hosts = [
    ['mysql1', 'mysql2', 'mysql3'],
    ['mysqla', 'mysqlb', 'mysqlc'],
    ['mysqli', 'mysqlj', 'mysqlk'],
    ['mysqlx', 'mysqly', 'mysqlz']
  ];

  for (var i = 1, n = 4; i <= n; ++i) {
    $('#host' + i).ddedit({
      values: hosts[i - 1],
      change: function (val) {
        console.log('list value changed to ' + val);
      }
    });
  }
});
</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	.edit {
	padding-left: 18px;
	background: #ff6 url(http://www.famfamfam.com/lab/icons/silk/icons/table_edit.png) 0 0 no-repeat;
	cursor: pointer;
	}
	</style>
	</head>
	<body>

	<div><span id="host1">mysql1</span>.protego.com</div>
	<div><span id="host2">mysqla</span>.protego.com</div>
	<div><span id="host3">mysqli</span>.protego.com</div>
	<div><span id="host4">mysqlx</span>.protego.com</div>

	</body>
	<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script src="jquery-ddeditable.js"></script>
	<script>
	$(function () {

	var hosts = [
	['mysql1', 'mysql2', 'mysql3'],
	['mysqla', 'mysqlb', 'mysqlc'],
	['mysqli', 'mysqlj', 'mysqlk'],
	['mysqlx', 'mysqly', 'mysqlz']
	];

	for (var i = 1, n = 4; i <= n; ++i) {
	$('#host' + i).ddedit({
	values: hosts[i - 1],
	change: function (val) {
	console.log('list value changed to ' + val);
	}
	});
	}
	});
	</script>
	</html>