我是一名自学成才、业余爱好的程序员。
我正在尝试构建一个 javaScript/jQuery 工具，该工具允许用户复制 Excel 中的行或列，然后将它们粘贴到在线 html 表单中，该表单由 <textarea> 网格组成。 s。方法是识别复制数据中的分隔符。
我已经冲浪和测试了一段时间了，我觉得我距离实现这一点还差得很远，但我仍然无法让它发挥作用。
我正在测试的示例表单如下:
示例数据集可能是这样的:
我不想说得太长，但我认为最好分享我迄今为止拥有的(几乎)整个代码，以便省略任何奥秘:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.inputArea').keypress(function(e){
if (e.which == 13)
{
alert ( "Hello.\n \n Please use your mouse or the [TAB] key to advance to other cells.\n \n The [RETURN] key is disabled to prevent premature submissions of the form.\n \n");
return false;
}
});
$('.inputArea').focus(function() {
$(this).addClass("InFocus");
});
$('.inputArea').blur(function() {
$(this).removeClass("InFocus");
});
$('.inputArea').keyup(function() {
var x = $(this).val();
if (x.indexOf('\t') > 0 && x.indexOf('\n') > 0) {
alert ("Hello. \n\n At this time, this form does not support \'copy \& paste\' from both columns and rows from a Excel sheet in the same block.\n\nColumns and/or rows must be copied independantly.\n\n");
$(this).val("");
return false;
}
else
if (x.indexOf('\t') > 0) {
var delT = x.split('\t');
var dit = $(this).attr('data-id');
for (var i = 0; i < delT.length ; i++)
$("#dataInput_" + dit[i]).val(delT[i]);
}
else
if (x.indexOf('\n') > 0) {
var delN = x.split('\n');
var din = $(this).attr('data-id');
for (var i = 0; i < delN.length ; i++)
$("#dataInput_" + din[i]).val(delN[i]);
din += 4;
}
return false;
});
})
</script>
<style>
<!--I will skip the styling code-->
</style>
</head>
<body>
<form name="simpleForm02">
<table>
<tr>
<th>Color</th>
<th>Model</th>
<th>Qty</th>
<th>Cost</th>
</tr>
<tr>
<td><textarea data-id="1" class="inputArea colorInput" id="dataInput_1" name="colorInput_row_1" onKeyUp="" ></textarea></td>
<td><textarea data-id="2" class="inputArea modelInput" id="dataInput_2" name="modelInput_row_1" onKeyUp=""></textarea></td>
<td><textarea data-id="3" class="inputArea qtyInput" id="dataInput_3" name="qtyInput_row_1" onKeyUp=""></textarea></textarea></td>
<td><textarea data-id="4" class="inputArea costInput" id="dataInput_4" name="costInput_row_1" onKeyUp=""></textarea></td>
</tr>
<tr>
<td><textarea data-id="5" class="inputArea colorInput" id="dataInput_5" name="colorInput_row_2" onKeyUp=""></textarea></td>
<td><textarea data-id="6" class="inputArea modelInput" id="dataInput_6" name="modelInput_row_2" onKeyUp=""></textarea></td>
<td><textarea data-id="7" class="inputArea qtyInput" id="dataInput_7" name="qtyInput_row_2" onKeyUp=""></textarea></td>
<td><textarea data-id="8" class="inputArea costInput" id="dataInput_8" name="costInput_row_2" onKeyUp=""></textarea></td>
</tr>
<tr>
<td><textarea data-id="9" class="inputArea colorInput" id="dataInput_9" name="colorInput_row_3" onKeyUp=""></textarea></td>
<td><textarea data-id="10" class="inputArea modelInput" id="dataInput_10" name="modelInput_row_3" onKeyUp=""></textarea></td>
<td><textarea data-id="11" class="inputArea qtyInput" id="dataInput_11" name="qtyInput_row_3" onKeyUp=""></textarea></td>
<td><textarea data-id="12" class="inputArea costInput" id="dataInput_12" name="costInput_row_3" onKeyUp=""></textarea></td>
</tr>
</table>
</form>
</body>
</html>
我得到的结果是，如果我从上面复制样本集数据的顶行，输入会被分割，但只有第一个分割会粘贴到聚焦的 <textarea> 中。 ，其余的消失。
我可以正确粘贴拆分的唯一方法是:
如果我将“数据 id”全面减少 1，以便第一个“数据 id”为 0，而不是 1。如果我替换:
$("#dataInput_" + din[i]).val(delN[i]);/$("#dataInput_" + dit[i]).val(delT[i]);
与
$("#dataInput_" + i).val(delN[i]);/$("#dataInput_" + i).val(delT[i]);
然后该工具可以工作，但仅限于“数据ID”0。即左上角<textarea>仅。
我知道必须有一些语法解决方案才能使“数据 id”循环正常工作。
最佳答案
主要问题是您对 dit[i] 和 din[i] 的使用。 dit 和 din 不是数组；这将它们视为字符串，并返回第 i 个字符，而不是按预期将 i 添加到值中。还有 Jan Dvorak 指出的循环语法问题(您应该使用缩进代码的编辑器，以便您可以看到结构)。
if (x.indexOf('\t') > 0) {
var delT = x.split('\t');
var dit = parseInt($(this).attr('data-id'), 10);
for (var i = 0; i < delT.length ; i++) {
$("#dataInput_" + (dit + i)).val(delT[i]);
}
}
else
if (x.indexOf('\n') > 0) {
var delN = x.split('\n');
var din = parseInt($(this).attr('data-id'), 10);
for (var i = 0; i < delN.length ; i++) {
$("#dataInput_" + (din + i)).val(delN[i]);
din += 4;
}
}
关于javascript - 有人可以在使用 indexOf、split 然后利用循环将分割粘贴到各个输入时校对我的 javaScript 语法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16621335/