1

HTMLテーブルに行を動的に追加するテーブルを作成しました。これにより、削除ボタンも行に動的に追加されます。テーブルの見出しがクリックされたときに列を配置する必要があります!

<body>
  <div id="app">
    <form id="organiser">
      <label id="heading">Organiser</label>
  <br/>
      <br/>
      <label>No:</label>
      <input type="text" id="description"/>
      <br/>
      <label>Importance Level:</label>
      <select id="options1">
        <option value=" 1 " name="1" id="1"> 1 </option>
        <option value=" 2 " name="2" id="2"> 2 </option>
        <option value=" 3 " name="3" id="3"> 3 </option>
      </select>
      <br/>
      <label>Due Date:</label>
      <input type="date" id="date" />
      <br/>
      <input type="button" id="add" value="Add" onClick="addRowToTable();"/>
    </form>
    <br/>
    <table border="1" id="table">
      <tr>
        <th>No</th>
        <th>Task</th>
        <th>Importance</th>
        <th>Date Tasks Due</th>
        <th></th>
      </tr>
    </table>
  </div>
</body>
4

2 に答える 2

0

セルのコンテンツを入力する別の方法は次のとおりです。

//Insert tags on cell
var cell2= row.insertCell(2);  
cell2.innerHTML = '<label>Hello </label> <span>World</span>"/>';

大きなテーブルの場合は、これを使用できます: http://www.trirand.com/blog/

于 2012-10-18T22:05:49.980 に答える
0

コードをいじって、(HTML を含む) 多数の変更を加えた場合は、この fiddleを参照してください。

私が最終的に得たJavaScriptは次のとおりです

function addRowToTable(table){
    var table = document.getElementById('table'),
        i = table.rows.length,
        tr = table.insertRow(i),
        t0 = tr.insertCell(0),
        t1 = tr.insertCell(1),
        t2 = tr.insertCell(2),
        t3 = tr.insertCell(3),
        t4 = tr.insertCell(4),
        text, elm;

    // Give row unique values
    tr.setAttribute('name', 'txtRow' + i);
    tr.setAttribute('id', 'txtRow' + i);

    // First cell
    text = document.createTextNode( i );
    t0.appendChild( text );

    // Second cell
    text = document.createTextNode( document.getElementById('description').value || 'N/A' );
    t1.appendChild( text );

    // Third cell
    elm = document.getElementById('options1'); // you need to describe what you're trying to do here better
    text = document.createTextNode( elm.value );
    t2.appendChild( text );

    // Fourth cell
    elm = document.getElementById('date');
    text = document.createTextNode( elm.value || 'N/A' );
    t3.appendChild( text );

    // Delete button cell
    elm = document.createElement('input');
    elm.setAttribute('type', 'button');
    elm.setAttribute('value', 'x');
    elm.setAttribute('class', 'delete');
    elm.onclick = function(e){ deleteButton( tr ); };
    t4.appendChild(elm);
}

function sortCol( col ){
    var table = document.getElementById('table'),
        arr, i;
    if( col >= table.rows[0].cells.length) return;

    arr = Array.prototype.map.call(table.rows, function( row ){
        return [row, row.cells[col].textContent];
    });
    arr.shift(); // skip ID, Description..

    arr.sort( function(a, b){
        return a[1].localeCompare( b[1] );
    } );

    for( i = 0; i<arr.length; i = i + 1){
        table.tBodies[0].appendChild( arr[i][0] );
    }
}

function deleteButton( tr ){
    tr.parentNode.removeChild(tr);
}
于 2012-10-18T23:07:17.310 に答える