Javascript/JQueryでユーザー入力を使用してテーブルを作成する方法

Question

変数に保存されるユーザー入力プロンプトを使用してテーブルを作成しようとしています。私はその変数を取ってそれを行と列の偶数にすることができるようにしたい。たとえば、ユーザー入力が5の場合、5x5の表を作成したいとします。

私はユーザーの入力を受けて正しい行数を作ることができますが、列に問題があります。

誰かが自分のコードについていくつかの洞察を提供できますか？私のjsフィドルは以下の通りです：

$(document).ready(function() { 
    //cache all jquery objects in variables 
    var $button = $('.button'); 
    var $wrapper = $('.wrapper'); 
    var $bones = $('.bones'); 
    var $rows = $('.rows'); 

    $button.click(function() { 

     //prompt user for input on table size 
     var inp = prompt("Enter a number"); 

     for (var i = 0; i < inp; i++) { 
      $bones.append("<tr class='rows'></tr>"); 
      $rows.append("<td class='block'></td>"); 
     }; 
    }); 

}); 

https://jsfiddle.net/81zv9zjs/

Answer 1

あなたはTR要素内で、その代わりに、あなたが持っているような単一のループのtd要素を追加する必要があり、試してみてください。

for (var i = 0; i < inp; i++) { 

    var elem = $("<tr class='rows'></tr>"); 

    for (var j = 0; j < inp; j++) { 
    elem.append("<td class='block'></td>"); 
    } 

    $bones.append(elem); 

}; 

Answer 2

をこのような

何かあなたが始める必要があります。

$(document).ready(function() { 
 
    //cache all jquery objects in variables 
 
    var $button = $('.button'); 
 
    var $bones = $('.bones'); 
 

 
    $button.click(function() { 
 
    //prompt user for input on table size 
 
    var rr = prompt("Rows"); 
 
    var cc = prompt("Cols"); 
 

 
    for (var i = 0; i < rr; i++) { 
 
     var row = $('<tr class="rows"></tr>'); 
 
     for (var j = 0; j < cc; j++) { 
 
     row.append('<td width="20">&nbsp;</td>'); 
 
     } 
 
     $bones.append(row); 
 
    } 
 
    }); 
 

 
});

table {width: 100%;border-collapse: collapse;} 
 
th,td {border: 2px solid #ccc;} 
 

 
.button { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 20px; 
 
    width: 100px; 
 
    margin: 0 auto; 
 
    margin-bottom: 10px; 
 
    background-color: black; 
 
    color: white; 
 
} 
 
.wrapper { 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: red; 
 
    margin: 0 auto; 
 
} 
 
.block { 
 
    background-color: white; 
 
    height: 20px; 
 
    width: 20px; 
 
    padding: 10px; 
 
    border: solid 0.1px; 
 
}

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

 
<a href="#" class="button"> Click Here! </a> 
 

 
<div class='wrapper'> 
 
    <table class="bones"></table> 
 
</div>

Answer 3

より広いアプローチがあります。その中にいくつかのデータを含むテーブルを作成しなければならないと仮定します。そのデータは、以下のようにオブジェクト構造内に提供されなければならない。

[ { Prop_0: 'Value_0', 
    Prop_1: 'Value_1', 
    Prop_2: 'Value_2', 
    Prop_3: 'Value_3', 
    Prop_4: 'Value_4' }, 
    { Prop_0: 'Value_5', 
    Prop_1: 'Value_6', 
    Prop_2: 'Value_7', 
    Prop_3: 'Value_8', 
    Prop_4: 'Value_9' }, 
    { Prop_0: 'Value_10', 
    Prop_1: 'Value_11', 
    Prop_2: 'Value_12', 
    Prop_3: 'Value_13', 
    Prop_4: 'Value_14' }, 
    { Prop_0: 'Value_15', 
    Prop_1: 'Value_16', 
    Prop_2: 'Value_17', 
    Prop_3: 'Value_18', 
    Prop_4: 'Value_19' }, 
    { Prop_0: 'Value_20', 
    Prop_1: 'Value_21', 
    Prop_2: 'Value_22', 
    Prop_3: 'Value_23', 
    Prop_4: 'Value_24' } ] 

とは、特性は、ヘッダーを指定し、値が<td>セル値です。 tableMakerはこのオブジェクトを第1引数としてとり、テーブルのHTMLマークアップテキストに変換します。 2番目の引数がtrueの場合、最初のオブジェクトのプロパティは<th>データに使用されます。だから私はそれが役に立てば幸い...

function tableMaker(o,h) { 
 
    var keys = o.length && Object.keys(o[0]), 
 
    rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>" 
 
                    : "<" + t + ">" + c + "</" + t + ">"),"<tr>"), 
 
    rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []); 
 
    return rows.length ? "<table>" + rows + "</table>" : ""; 
 
} 
 

 
var data = [{"Prop_0":"Value_0","Prop_1":"Value_1","Prop_2":"Value_2","Prop_3":"Value_3","Prop_4":"Value_4"},{"Prop_0":"Value_5","Prop_1":"Value_6","Prop_2":"Value_7","Prop_3":"Value_8","Prop_4":"Value_9"},{"Prop_0":"Value_10","Prop_1":"Value_11","Prop_2":"Value_12","Prop_3":"Value_13","Prop_4":"Value_14"},{"Prop_0":"Value_15","Prop_1":"Value_16","Prop_2":"Value_17","Prop_3":"Value_18","Prop_4":"Value_19"},{"Prop_0":"Value_20","Prop_1":"Value_21","Prop_2":"Value_22","Prop_3":"Value_23","Prop_4":"Value_24"}], 
 
tableHTMLText = tableMaker(data,true); 
 

 
document.write(tableHTMLText); 
 
console.log(tableHTMLText);

を見ることができます。