我在使用javascript时遇到了一个非常奇怪的问题,我正在构建一个多维数组,并以某种方式在var分配中将其清空为[[]]
。
传递给buildFormObject函数的目标是html表单元素。
if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
var el = this;
if (!document.documentElement.contains(el)) return null;
do {
if (el.matches(s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}
var submit = document.getElementsByClassName('submit');
submitForm_click(submit);
function submitForm_click (trigger) {
if (trigger.length > 0) {
for (var t of trigger) {
t.addEventListener('click', function (e) {
e.preventDefault();
submitForm(t.parentNode);
});
}
} else {
trigger.addEventListener('click', function (e) {
e.preventDefault();
submitForm(trigger.parentNode);
});
}
}
function submitForm (target) {
var info = buildFormObject(target);
console.log(buildFormObject(target));
console.log(info);
}
function buildFormObject (target) {
var inputs = target.querySelectorAll('input,select');
var results = [];
var multi = [];
var iter = 0;
var pos = 0;
for (var input of inputs) {
if (iter > 0) {
iter = iter - 1;
continue;
}
if (input.parentNode.closest('.multiInput') != null) {
var obj = [];
var parent = input.parentNode.closest('.multiInput');
var children = parent.querySelectorAll('input,select');
for (var i of children) {
if (checkIfValueExist(i, i.type)) {
obj[i.name] = i.value;
}
}
multi[pos] = obj;
results[parent.attributes.name.nodeValue] = multi;
pos = pos + 1;
iter = children.length-1;
} else if (checkIfValueExist(input, input.type)) {
results[input.name] = input.value;
pos = 0;
multi = [];
}
}
return results;
}
function checkIfValueExist (target, type) {
switch (type) {
case 'text':
return (target.value == "" ? false : true);
break;
case 'select-one':
return (target.value == "" ? false : true);
break;
case 'checkbox':
return (target.checked === false ? false : true);
break;
case 'radio':
return (target.checked === false ? false : true);
break;
case 'button':
return false;
break;
case 'submit':
return false;
break;
default:
return true;
break;
}
}
<form id="ct">
<input type="hidden" name="task" value="createTable"/>
<div id="tableSection" class="flexContainer">
<div class="block">
<label for="dbName">Select Database</label>
<select name="dbName" class="dbList" required>
<option value="" disabled selected>Please Select</option>
<option value="1">test</option>
</select>
</div>
<div class="block">
<label for="tableName">Table Name</label>
<input type="text" name="tableName" required/>
</div>
</div>
<div class="row flexContainer multiInput" name="tableRow">
<div class="trColumn">
<label for="columnName">Name</label>
<input type="text" name="columnName" required/>
</div>
<div class="trColumn">
<label for="columnType">DataType</label>
<select name="columnType" required>
<option value="" disabled selected>Please Select</option>
<option value="1">CHAR</option>
</select>
</div>
<div class="trColumn">
<label for="columnLength">Length</label>
<input type="text" name="columnLength"/>
</div>
<div class="trColumn">
<label for="columnPK">PK</label>
<input type="checkbox" name="columnPK" value="1"/>
</div>
<div class="trColumn">
<label for="columnDefault">DefaultValue</label>
<input type="text" name="columnDefault"/>
</div>
</div>
<input type="button" class="submit" value="Submit" />
</form>
结果1:
[task: "createDBTable", dbName: "1", tableName: "tester", tableRow: Array(1)]
dbName: "1"
tableName: "tester"
tableRow: [Array(0)]
task: "createDBTable"
length: 0
__proto__: Array(0)
结果2:
[task: "createDBTable", dbName: "1", tableName: "tester", tableRow: Array(1)]
dbName: "1"
tableName: "tester"
tableRow: "[[]]"
task: "createDBTable"
length: 0
__proto__: Array(0)
我不明白的是为什么tableRow从Array(6)
值变为[[]]
只是因为我将原始变量(从buildFormObject函数返回的值)设置为变量。 / p>
其他信息
在上面的代码片段中,我包括了正在使用的代码。似乎有一个小怪癖,console.log仅显示[],但是您键入应该在其中的属性名称之一,例如“ tableName”,然后就可以访问该值。对于“ tableRow”的问题属性,情况并非如此,因为嵌套数组显示为[]
。我不确定这是否是测试软件,但是如果您在本地测试环境中尝试使用该软件,那么看看我的最初问题是什么都不会有问题。