0

我是一个自学的、兼职的业余爱好者。

我正在尝试构建一个 javaScript/jQuery 工具，它允许用户在 Excel 中复制行或列，然后将它们粘贴到由<textarea>s 网格组成的在线 html 表单中。方法是识别复制数据中的分隔符。

我已经进行了一段时间的冲浪和测试，我觉得我离实现这一目标还有很长的路要走，但我仍然无法让它发挥作用。

我正在测试的示例表单如下：

测试图像的样本表格

样本数据集可能是这样的：

要粘贴到表单中的示例数据集

我不想太啰嗦，但我认为最好（几乎）分享我到目前为止的全部代码，以免留下任何谜团：

<!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>

我得到的结果是，如果我从上面复制样本集数据的第一行，输入会被拆分，但只有第一个拆分会粘贴到 focus 中<textarea>，其余的会消失。

我可以正确粘贴拆分的唯一方法是：

如果我将“数据 ID”全面减少一个，以便第一个“数据 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”循环正常工作。

4

1 回答 1

3

主要问题是您使用dit[i]and 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;
             }
         }
于 2013-05-18T06:32:45.330 回答