オブジェクトjquery/javascriptからテーブルを作成

Question

私は以下を実装しようとしています。

ユーザは、テキストボックスに文を入力し、その後にテーブルが作成されます。例がこれです。

入力："This is what I want to achieve"

結果：以下

{t: ["this", "to"], i: ["is", "i"], w: ["what", "want"], a: ["achieve"]}; 

現在です：私はこのようになりますオブジェクトが存在していたコードに基づいて、現在

、コード私は（also see jsfiddle here）持っています。

私は入力文字列を取り、各単語の最初の文字を持つ行を持つテーブルを作成することができます。

HTML

<textarea id="text-input" name="textarea" rows="5" cols="25">This is what I want to achieve</textarea> 
<button class="calculate">Calculate</button> 

<table> 
    <tbody> 
    <tr class="words-header"></tr> 
    </tbody> 
</table> 

Javascriptを

$(document).ready(function() { 
    $(".calculate").click(function() { 
    var result = {}, 
     arr = []; 
    var array = $("#text-input").val().toLowerCase().split(" "); 

    for (var i = 0; i < array.length; i++) { 
     if (typeof result[array[i][0]] == 'undefined') { 
     result[array[i][0]] = []; 
     } 
     result[array[i][0]].push(arr[i]); 
    } 
    for (var key in result) { 
     $(".words-header").append("<td>" + key.toUpperCase() + "</td>"); 
    } 
    }); 
}); 

私はそれが助け場合、最終的なテーブルは次のようになりますと信じて：

<table> 
    <tr> 
     <td>A</td> 
     <td>I</td> 
     <td>T</td> 
     <td>W</td> 
    </tr> 
    <tr> 
     <td>achieve</td> 
     <td>is</td> 
     <td>this</td> 
     <td>what</td> 
    </tr> 
    <tr> 
     <td> </td> 
     <td>i</td> 
     <td>to</td> 
     <td>want</td> 
    </tr> 
</table> 

Answer 1

あなたはこのようにそれを行うことができます（clickiで試してみる実行コードスニペットに下記ボタン）×：... [：

var app = app || {}; 
 
(function() { 
 
    "use strict"; 
 

 
    var result, arr; 
 

 
    app.initialize = { 
 
     init: function() { 
 
      app.splitWords.init(); 
 
     } 
 
    }; 
 

 
    app.splitWords = { 
 
     init: function() { 
 
      $(".calculate").click(function() { 
 
       result = []; 
 
       arr = $("#text-input").val().split(" "); 
 
       app.createMultiArray.init(arr); 
 
      }); 
 
     } 
 
    }; 
 

 
    app.createMultiArray = { 
 
     init: function(array) { 
 
      for (var i = 0; i < array.length; i++) { 
 
       var letter = array[i][0].toLowerCase(); 
 
       if (typeof result[letter] == 'undefined') { 
 
        result[letter] = []; 
 
       } 
 
       result[letter].push(array[i]); 
 
      } 
 
      // I added this method 
 
      app.buildTable.init(result); 
 
     } 
 
    }; 
 

 
    app.buildTable = { 
 
     init: function(result) { 
 
      var headers = Object.keys(result), 
 
       max_rows = 0, 
 
       rows_html = ''; 
 
      headers.sort(); 
 
      app.createHeaders.init(headers); 
 
      // Determine how many rows you'll need 
 
      for (var i = 0; i < headers.length; i++) { 
 
       if(result[headers[i]].length > max_rows) { max_rows = result[headers[i]].length; } 
 
      } 
 
      // Loop "max_rows" times 
 
      for (var i = 0; i < max_rows; i++) { 
 
       rows_html += '<tr>'; 
 
       // Loop through all letters 
 
       for(var j = 0; j < headers.length; j++) { 
 
        rows_html += '<td>'; 
 
        if(i < result[headers[j]].length) { 
 
         rows_html += result[headers[j]][i]; 
 
        } 
 
        rows_html += '</td>'; 
 
       } 
 
       rows_html += '</tr>'; 
 
      } 
 
      $(".words-header").after(rows_html); 
 
     } 
 
    }; 
 
    
 
    app.createHeaders = { 
 
     init: function(headers) { 
 
      // Empty the table in case of multiple tries 
 
      $(".words-header").parent().html('<tr class="words-header"></tr>'); 
 
      for (var i = 0; i < headers.length; i++) { 
 
       $(".words-header").append("<td>" + headers[i].toUpperCase() + "</td>"); 
 
      } 
 
     } 
 
    }; 
 

 
    app.docOnReady = { 
 
     init: function() { 
 
      app.initialize.init(); 
 
     } 
 
    }; 
 

 
    $(document).ready(app.docOnReady.init); 
 

 
})(jQuery);

#results-table table{ border-collapse: collapse; } #results-table td{ border: 1px solid #000; padding: .2em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<textarea id="text-input" name="textarea" rows="5" cols="25">This is what I want to achieve</textarea> 
 
<button class="calculate">Calculate</button> 
 

 
<div id="results-table"> 
 
    <table> 
 
    <tbody> 
 
     <tr class="words-header"></tr> 
 
    </tbody> 
 
    </table> 
 
</div>