ユーザ入力によるテーブルの動的作成

現在、JSとHTMLを使用してテーブルを動的に作成しようとしています。ユーザ入力によるテーブルの動的作成

しかし、現時点では、ユーザーエントリから値を取得できないようです。

私は間違っていますか？

ありがとうございます！代わりに

：あなたはこのような何かを書いてみる文書にテーブルを貼り付ける必要があり

あなたの関数で

<script type="text/javascript"> 
function createTable(num_rows, numcols) 
{ 
    var num_rows = document.tablegen.rows.value; 
    var num_cols = document.tablegen.cols.value; 
    var theader = '<table>\n'; 
    var tbody = ''; 

    for(var i=0; i<num_rows;i++) 
    { 
     // create each row 
     tbody += '<tr>'; 

    for(var j=0; j<num_cols;j++) 
    { 
     // create cell 
     tbody += '<td>'; 
     tbody += 'Cell ' + i + ',' + j; 
     tbody += '</td>' 
    } 

    // closing row table 
    tbody += '</tr>\n'; 

    } 

    var tfooter = '</table>'; 

    // TO DO 

    return theader + tbody + tfooter; 
} 
</script> 
</head> 

<body> 
<form name="tablegen"> 
<label>Rows: <input type="text" name="rows"/></label><br /> 
<label>Cols: <input type="text" name="cols"/></label><br/> 
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/> 
</form> 
<script type="text/javascript"> 
document.write(createTable()); 
</script>

出典

2011-11-18 methuselah

http://jsfiddle.net/z2WkM/このコードスニペットは、それを質問に答えるかもしれないが –

何も起こりません – methuselah

私はdocument.writeの使用を推奨しません。この

Why is document.write considered a "bad practice"?

を読んで、これを試してみてください：

<script type="text/javascript"> 
function createTable() 
{ 
    var num_rows = document.getElementById('rows').value; 
    var num_cols = document.getElementById('cols').value; 
    var theader = '<table border="1">\n'; 
    var tbody = ''; 

    for(var i=0; i<num_rows;i++) 
    { 
     tbody += '<tr>'; 
     for(var j=0; j<num_cols;j++) 
     { 
      tbody += '<td>'; 
      tbody += 'Cell ' + i + ',' + j; 
      tbody += '</td>' 
     } 
     tbody += '</tr>\n'; 
    } 
    var tfooter = '</table>'; 
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
} 
</script> 
</head> 

<body> 
<form name="tablegen"> 
<label>Rows: <input type="text" name="rows" id="rows"/></label><br /> 
<label>Cols: <input type="text" name="cols" id="cols"/></label><br/> 
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/> 
</form> 

<div id="wrapper"></div>

あなたはまたinsertRowとinsertCellを使用することができます。

続きを読む：

https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_insertrow

出典

2011-11-18 18:48:15

代わりのreturn

return theader + tbody + tfooter;

書き込み

document.write(theader + tbody + tfooter)

出典

2011-11-18 12:50:42 antyrat

var fnPuzzel = { 
max: 9, 
min: 1, 
rowControl: null, 
colControl: null, 
init: function (o) { 
    if (o) { 
     if ($('#' + o.rowControl)) 
      rowControl = $('#' + o.rowControl); 
     if ($('#' + o.columnControl)) 
      colControl = $('#' + o.columnControl); 
     $('#' + o.button).bind('click', fnPuzzel.createTable); 
    } 
}, 
createTable: function() { 
    var rows = $(rowControl).val(); 
    var columns = $(colControl).val(); 
    var table = $('<table>'); 
    for (var rowCount = 0; rowCount < rows; rowCount++) { 
     var tr = $('<tr>'); 
     for (var columnCount = 0; columnCount < columns; columnCount++) { 
      $(tr).append($('<td>')); 
     } 
     $(table).append(tr); 
    } 
    $('.container').empty().append($(table).html()).find('td').bind('click', fnPuzzel.selectColumn); 
    var delay = parseInt(Math.random() * 3000); 
    setTimeout(fnPuzzel.selectRandom, delay); 
}, 
selectColumn: function() { 
    var cell = this; 
    if (!$(cell).hasClass('selected')) 
     $(cell).addClass('selected'); 

}, 
selectRandom: function() { 
    var mx = $('.container td').not('.selected').length; 
    var mn = 0; 
    var randomCell = mn + Math.floor(Math.random() * (mx + 1 - mn)); 
    if (randomCell > 0) 
     $('.container td').not('.selected').eq(randomCell).addClass('random'); 
} 
}

出典

2013-06-20 18:16:40

-1

// first you need to import jquery library    
// detail is id of the table 

$(function(){ 

// add new row 
$('.add').click(function(){ 
    var tr = '<tr>'+ 
       '<td><input type="text" name="product[]" required class="form-control product" ></td>'+ 
       '<td><input type="text" name="quantity[]" required class="form-control quantity"></td>'+ 
       '<td><input type="text" name="product[]" required class="form-control product" ></td>'+ 
       '<td><input type="text" name="amount[]" required class="form-control amount"></td>'+ 
       '<td><input type="button" class="btn btn-danger remove" value="-"></td>'+ 
      '</tr>'; 
    $('.details').append(tr); 

});

出典

2016-10-05 14:13:48

方法や理由を説明するための文脈を提供していません。あなたの答えを説明する文を1つまたは2つ追加することを検討してください。 – brandonscript

ユーザ入力によるテーブルの動的作成

答えて

関連する問題