[SOLVED] innerhtml is ignoring cellpadding?

[scarhand]

how come it is not styling the table properly with this script:

 

    for (var x = 1; x <= num; x++)
    {
      document.getElementById('extracards').innerHTML += '<table cellpadding="5" cellspacing="0" border="0" align="center">';
      document.getElementById('extracards').innerHTML += '<tr>';
      document.getElementById('extracards').innerHTML += '<td><b>Choose card</b></td>';
      document.getElementById('extracards').innerHTML += '<td style="padding-right: 20px;">';
      document.getElementById('extracards').innerHTML += '<select name="cardtype"><option value="V">Visa®</option><option value="M">MasterCard®</option></select>';
      document.getElementById('extracards').innerHTML += '</td>';
      document.getElementById('extracards').innerHTML += '<td><b>Security code</b></td>';
      document.getElementById('extracards').innerHTML += '<td style="padding-right: 20px;"><input name="cardcode" type="text" size="10"></td>';
      document.getElementById('extracards').innerHTML += '<td><b>Expiry date</b></td>';
      document.getElementById('extracards').innerHTML += '<td style="padding-right: 20px;"><input name="cardexpiry" type="text" size="10"></td>';
      document.getElementById('extracards').innerHTML += '<td><b>Amount to charge</b></td>';
      document.getElementById('extracards').innerHTML += '<td><input name="cardcharge" type="text" size="10"></td>';
      document.getElementById('extracards').innerHTML += '</tr>';
      document.getElementById('extracards').innerHTML += '</table>';
    }

 

it seems to be ignoring the align, and padding

[Psycho]

It's because of the manner in which you are populating the innerHTML code. By continuously updating on each line there is no complete table when it is first populated. The browser is gettign confused and doesn't go back to the initial TABLE tag to determine how everything is going to be displayed.

 

Try this:

    for (var x = 1; x <= num; x++)
    {
      var htmlOutput = document.getElementById('extracards').innerHTML;
      htmlOutput += '<table cellpadding="5" cellspacing="0" border="0" align="center">';
      htmlOutput += '<tr>';
      htmlOutput += '<td><b>Choose card</b></td>';
      htmlOutput += '<td style="padding-right: 20px;">';
      htmlOutput += '<select name="cardtype"><option value="V">Visa®</option><option value="M">MasterCard®</option></select>';
      htmlOutput += '</td>';
      htmlOutput += '<td><b>Security code</b></td>';
      htmlOutput += '<td style="padding-right: 20px;"><input name="cardcode" type="text" size="10"></td>';
      htmlOutput += '<td><b>Expiry date</b></td>';
      htmlOutput += '<td style="padding-right: 20px;"><input name="cardexpiry" type="text" size="10"></td>';
      htmlOutput += '<td><b>Amount to charge</b></td>';
      htmlOutput += '<td><input name="cardcharge" type="text" size="10"></td>';
      htmlOutput += '</tr>';
      htmlOutput += '</table>';
      document.getElementById('extracards').innerHTML = htmlOutput;
    }