render inputs, mode dropdown

htdocs/css/admin.css

@@ -79,4 +79,9 @@ table.bookmarks .frequency {
 
 .wsjt-decoding-depths-table {
     width: auto;
+    margin: 0;
+}
+
+.wsjt-decoding-depths-table td:first-child {
+    padding-left: 0;
 }

htdocs/lib/settings/WsjtDecodingDepthsInput.js

@@ -1,16 +1,32 @@
 $.fn.wsjtDecodingDepthsInput = function() {
-    var renderTable = function(data) {
-        var $table = $('<table class="table table-sm table-borderless wsjt-decoding-depths-table">');
-        $table.append($.map(data, function(value, mode){
-            return $('<tr><td>' + mode + '</td><td>' + value + '</td></tr>');
+    function WsjtDecodingDepthRow(inputs, mode, value) {
+        this.el = $('<tr>');
+        this.modeInput = $(inputs.get(0)).clone();
+        this.modeInput.val(mode);
+        this.valueInput = $(inputs.get(1)).clone();
+        this.valueInput.val(value);
+        this.el.append([this.modeInput, this.valueInput].map(function(i) {
+            return $('<td>').append(i);
         }));
-        return $table;
+    }
+
+    WsjtDecodingDepthRow.prototype.getEl = function() {
+        return this.el;
     }
 
     this.each(function(){
         var $input = $(this);
         var $el = $input.parent();
-        var $table = renderTable(JSON.parse($input.val()));
+        var $inputs = $el.find('.inputs')
+        var inputs = $inputs.find('input, select');
+        $inputs.remove();
+        var rows = $.map(JSON.parse($input.val()), function(value, mode) {
+            return new WsjtDecodingDepthRow(inputs, mode, value);
+        });
+        var $table = $('<table class="table table-sm table-borderless wsjt-decoding-depths-table">');
+        $table.append(rows.map(function(r) {
+            return r.getEl();
+        }));
         $el.append($table);
     });
 };