title: Adding rows and columns to a table dynamically with jQuery
body: <p>I have the following JavaScript code:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>How to translate this from DOM calls to jQuery?Can anyone give sample code .</p>