Aggiunta di righe e colonne di una tabella dinamicamente con jQuery

Ho il seguente codice JavaScript:

function addRowToTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  //if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);

  //left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);

  //right cell
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 40;

  el.onkeypress = keyPressTest;
  cellRight.appendChild(el);

  //select cell
  var cellRightSel = row.insertCell(2);
  var sel = document.createElement('select');
  sel.name = 'selRow' + iteration;
  sel.options[0] = new Option('text zero', 'value0');
  sel.options[1] = new Option('text one', 'value1');
  cellRightSel.appendChild(sel);
}

Come tradurre questo da DOM chiamate di jQuery?Chiunque può dare il codice di esempio .

InformationsquelleAutor user415772 | 2010-08-13

3 Replies
  1. 9

    Vorrei evitare di usare le stringhe di codice HTML e continuare a creare elementi del DOM, come si era prima. jQuery rende davvero facile:

    var row = $("<tr>");
    row.append( $("<td>").text("hello") );
    $("#tblSample").append(row);

    Vedere http://api.jquery.com/jQuery/#jQuery2 per ulteriori info.

    InformationsquelleAutor cam

  2. 3

    Forse qualcosa di simile a questo (ma senza select): http://jsfiddle.net/dVBMc/3/

    AGGIORNAMENTO:
    http://jsfiddle.net/dVBMc/6/

    function addRowToTable(table, cell1, cell2) {
        var row;
        row = "<tr><td>" + cell1 + "</td><td>" + cell2 + "</td></tr>";
        table.append(row);
    }

    Uso:

    $(document).ready(function() {
        $('button').click(function() {
            addRowToTable($('table'), 'cell1 content', 'cell2 content');
        });
    });

    InformationsquelleAutor Im0rtality

  3. 2

    Il modo più semplice è quello di utilizzare semplicemente $('#tblSample').append('<tr> ... </tr>') inserire manualmente la stringa html (e se è costante). È inoltre possibile leggere il codice html da qualche altra parte, per più leggibile il codice:

     $('#tblSample').append($('div#blank-row-container').html());

    InformationsquelleAutor Ian Henry

Lascia un commento