在表中的特定 td 下添加项目

Question

我正在尝试实现以下内容。

用户在文本框中输入一个句子，然后创建一个表格。一个例子就是这样。

输入：“这就是我想要实现的”

结果：

目前，我有以下内容，它使用每个单词的第一个字母为我构建标题，但是这些字母会重复自己。我现在需要构建表体。我可以使用相同的逻辑将每个单词放入表格中，但我正在努力做的是将单词添加到表格的相应部分下。例如，单词'This' 在第一行的第三个<td> 中。我做了很多尝试，但都没有成功，所以将 make tableBody 函数保留为空白画布。我的一个想法是为第一行中的每个项目添加第一个字母的 id，然后我可以稍后将其用于完整的单词，但无法将它们放在适当的第一个字母下。

var $ = jQuery.noConflict();

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

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

    app.checkWord = {

    splitWords: function() {

        $(".calculate").click(function(){
            app.checkWord.firstLetter();
            var result = $("#text-input").val().split(" ");
            app.createTable.tableHeader(result.sort());
        });
        
    },

    firstLetter: function() {
        
    }
},

app.createTable = {

    tableHeader: function(sentence) {  
        $.each(sentence, function(index, item) {
            $(".words-row").append("<td>" + sentence[index].charAt(0).toUpperCase() + "</td>");
        });        
    },

    tableBody: function() {

    }

}

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

  $(document).ready(app.docOnReady.init);
  $(window).resize(app.docOnResize.init);

})(jQuery);

table {
  border-collapse: collapse;
}
table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
</div>

<div id="main">

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

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

</div>

Answer 1

我会为你指明正确的方向，而不是给你想要的答案。

忘记使用 DOM 树。找出哪些词属于什么类别，然后才呈现您的数据表示。

这里是快速而肮脏的 javascript，向您展示如何按首字母将字符串拆分为多维数组。

然后，您将获取该数组并将其输出到表格行，或者您想要对其进行的任何操作。

// Your string
var str = 'this is what i want to achieve';

// Split string by space -> creates array of words.
var arr = str.split(' ');

// Resulting array
var result = new Array();

// Go through all words and assing them to resulting multi-dimensional array
for (var i=0; i< arr.length; i++){

  if (typeof result[arr[i][0]] == 'undefined' )
  	result[arr[i][0]] = new Array();
    
  result[arr[i][0]].push(arr[i]);
}


/* Print output */
function dump(obj) {
    var out = '';
    for (var i in obj) {
        out += i + ": " + obj[i] + "\n";
    }

    var pre = document.createElement('pre');
    pre.innerHTML = out;
    document.body.appendChild(pre)
}

dump(result);