1

以下のコードを参照してください。テーブルは、以下の選択された ID オプションで選択された入力に基づいて行数を変更する必要がありますが、選択 ID の最初の値のみが読み取られ、行数は選択に基づいて変更されません。私のコードの間違いを指摘してください。

http://jsfiddle.net/uTY6n/14/

HTML:

  <div id="scrollingDiv">
<select id="read">
    <option value="1">1</option>
    <option value="2">2</option></select>

<table id="contentTable" border="1">
    <!-- Fill table programmatically -->
</table>
 </div>

ジャバスクリプト:

  function buildTable()
 {
var myTable =document.getElementById("contentTable");
var j=document.getElementById("read").value;
var rows = [];
var cells = [];

for( var i = 0; i < j; i++ )
{
    rows[i] = myTable.insertRow(i);
    if(i%3==2)rows[i].addClass("everyrow");
    cells[i] = [];

    for( var x = 0; x < 3 ; x++ )
    {
        cells[i][x] =document.createElement((x==0)?"th":"td");
        cells[i][x].innerHTML = (x==0)?"<input>":"<input>";
        rows[rows.length - 1].appendChild(cells[i][x]);
    }
  }

   }
   buildTable();

CSS:

  #scrollingDiv
  {
  border: 1px groove black;
  height: 350px;
  width: 350px;
  background: #ffffff;
  overflow: auto;
  }

  #contentTable
  {
  height: 350px;
  width: 350px;
  }
  .every3rdrow{
  border-bottom:3px solid black;
  }
4

2 に答える 2

0

このデモを参照してください。

まず、イベント リスナーを にアタッチする必要があります<select>。

document.getElemenyById('read').addEventListener('change', buildTable);

buildTable()次に、が呼び出されるたびにテーブルが再構築される前に、テーブルが空であることを確認する必要があります。

function buildTable() {
    var myTable =document.getElementById("contentTable");
    var j=document.getElementById("read").value;
    var rows = [];
    var cells = [];

    while (myTable.hasChildNodes()) {
        myTable.removeChild(myTable.lastChild);
    }

    ...
}

お役に立てれば！

于 2013-09-17T22:07:07.037 に答える
0

試す

function buildTable() {

var myTable =document.getElementById("contentTable");
myTable.innerHTML = "";
var j=document.getElementById("read").value;
var rows = [];
var cells = [];
var myHtml = "";

    for( var i = 0; i < j; i++ ) {
        myHtml += "<tr>";
             for( var x = 0; x < 3 ; x++ ){
                myHtml += "<td></td>"
             }
        myHtml += "</tr>";
    }
myTable.innerHTML = myHtml;
}

それが一般的な考え方です。また、これonChangeを選択したものと呼ぶようにしてください。

于 2013-09-17T22:07:17.077 に答える