JavaScript/jQueryデリミタリストからHTMLを作成する

Question

私はここに自分の努力を投稿できるので、私はコードを書くことになっているはずですが、これを行うには数回試してみました。謝罪。

私はタブで区切られた文字列を持っています。これを3列のHTMLテーブルに変換したいと思います。文字列に6つの値がある場合は、これを2行にします。たとえば：

aa | bb | cc | dd | ee | ff 

は

aa | bb | cc 
dd | ee | ff 

は、JavaScriptやjQueryを使ってこれを行う方法はありになるのでしょうか？

ありがとうございました。

Answer 1

希望します。以下のコードでコメントを見つけることができます。

$(document).ready(function() { 
 
\t var strColumn = "aa | bb | cc | dd | ee | ff"; 
 

 
\t var table = $("<table/>"); //Create new table element 
 
\t $.each(strColumn.split("|"), function (i, val){ 
 
\t \t if (i == 0 || i % 3 == 0) row = $("<tr/>"); //Create new row after every 3 columns 
 
\t \t row.append($("<td>" + val.trim() + "</td>")); //Create table column and append to row 
 
\t \t table.append (row); //Append row to table 
 
\t }); 
 
\t $("body").append(table); //Append table to body element 
 
});

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

Answer 2

jQueryでこれを実現するには、次のような簡単なロジックを使用できます。

var input = "aa | bb | cc | dd | ee | ff | aaa | fsf"; 
 

 
//Frmat the input 
 
input = input.split("|").map(function(text) { 
 
    return text.trim(); 
 
}); 
 

 

 
var MAX_COL_COUNT = 3, 
 
    table = $("#table"), 
 
    cellCounter = 0, 
 
    rowCounter = 0; 
 

 
//Add into a table with tr and td 
 
input.forEach(function(text) { 
 
    if (cellCounter == MAX_COL_COUNT || cellCounter == 0) { 
 
    table.append("<tr></tr>"); 
 
    rowCounter++; 
 
    cellCounter = 0; 
 
    } 
 

 
    table.find("tr").eq(rowCounter - 1).append("<td>" + text + "</td>"); 
 
    cellCounter++; 
 
});

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

 

 
<table id="table"> 
 

 
</table>

Answer 3

まずあなたが）（スプリットで文字列から配列を作成する必要があります。 使用この：我々は2次元配列を作るために、この配列ごとに3つの項目を分割しようとしている

[aa,bb,cc,dd,ee,ff] 

次へ：

var str = "aa | bb | cc | dd | ee | ff"; 
var array = str.split("|"); 

は、これはあなたにこのような配列を与えるウィル。

var str = "aa | bb | cc | dd | ee | ff"; 
var array = str.split("|"); 

var 2dArray = []; 
var count = 0; 
var arr = []; 
for(var i in array){ 
    arr.push(array[i]); 
    count++; 
    if(count > 2){ 
     2dArray.push(arr); 
     arr = []; 
     count = 0; 
    } 
} 

ここで2次元配列があります。テーブルに簡単に解析できます。たとえば、これをチェックしてください：Generate HTML table from 2D JavaScript array

注：これは私の頭の中から思いつきました。だから多少の微妙な調整が必要かもしれませんが、それはあなたにアイデアを与えるでしょう。