0

私は独学でパートタイムの趣味のプログラマーです。

ユーザーが Excel で行または列をコピーし、s のグリッドで構成されるオンライン html フォーム内に貼り付けられるようにする javaScript/jQuery ツールを構築しようとしています<textarea>。その方法は、コピーされたデータの区切り文字を認識することです。

私はしばらくサーフィンとテストを行ってきましたが、これを達成するのはほんの少し先だと感じていますが、まだ機能させることはできません.

私がテストしているフォームの例は次のとおりです。

画像をテストするためのサンプル フォーム

サンプル データ セットは次のようになります。

フォームに貼り付けるサンプル データ セット

あまり長くなりたくないのですが、謎を省くために、これまでに持っているコード全体 (ほぼ) を共有するのが最善だと思いました。

<!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 ではなく 0 になるように、「データ ID」を全面的に 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]との使用でし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 に答える