2014-09-23 11 views
0

Я пытаюсь создать таблицу отображения n по n таблицы со следующими деталями:Javascript Таблица умножения

  • Размер (n) определяется путем ввода пользователя
  • Я хотел бы цветовой код четных строк определенный цвет и нечетные другой цвет
  • результаты будут появляться в новом окне/вкладке

Это ж шляпа у меня до сих пор:

HTML:

<body> 
    <form name="f"> 
     <input type="text" value ="r" size="6" name="r"> 
     <input type="text" value ="c" size="6" name="c"> 
     <input type="button" value="make table" onclick="happy(r.value,c.value)"> 
    </form> 
</body> 

JS:

function happy(rows, cols) { 
    var hcode = ''; 

    w=window.open(); 
    w.document.write("<table border='1'>"); 
    for (i=0; i<=rows; i++) { 
     w.document.write("<td>"+i) 
    } 

    for (j=1; j<=cols; j++) { 
     var x = 0; 
     w.document.write("<tr><td>"+j); 
     //w.document.write("<td>"+j*x); 
    } 

    w.document.write("<tr>") 
    for (x=1; x<= rows; x++) { 
     w.document.write("<tr>"); 

     for (n=1; n<= cols; n++) { 
      if (x %2==0) { 
       w.document.write("<td bgcolor='aquamarine'>"+x*n+"</td>"); 
       if (n<=cols) { 
        w.document.write() 
       } 
      } 
      else { 
       w.document.write("<td bgcolor='coral'>"+x*n+"</td>"); 
      } 
     } 
    } 
    w.document.write('</table') 

Я играл с некоторыми вариациями, но никто, в результате чего мне нужно. Любые советы приветствуются! Благодаря!

+1

document.write будет закрыть теги ... Вы не строите строку. – epascarello

+0

Так что же делает ваш код на самом деле? Какие сообщения об ошибках вы видите (если есть)? С чем именно вы столкнулись. –

+4

Даже не используйте 'document.write()'. – PHPglue

ответ

0

Я попытался понять необходимость.

http://jsfiddle.net/OxyDesign/kb294v6a/

Является ли это то, что вы хотите?

JS (с JQuery)

$(document).ready(function(){ 
    makeTable(); 
    $('form').on('submit',function(e){ 
     e.preventDefault(); 
     makeTable(); 
    }); 
}); 

function makeTable(){ 
    var rows = parseInt($('input[name=r]').val()), 
     col = parseInt($('input[name=c]').val()); 

    if(typeof rows === 'number' && rows > 0 && typeof col === 'number' && col > 0){ 
     var table = '<table>'; 
     for(var i = 1; i <= rows; i++){ 
      table += '<tr>'; 
      for(var j = 1; j <= col; j++){ 
       table += '<td>'+i*j+'</td>'; 
      } 
      table += '</tr>'; 
     } 
     table += '</table>'; 
     $('#table').html(table); 
    } 
} 
0

Если вы просто ищете основную таблицу умножения, где вы можете стилизовать каждую строку, это должно сделать работу:

function multiplicationTable(x, y){ 
    var Y = typeof y === 'number' ? y : x; 
    var table = '<table><tbody>'; 
    for(var i=0,l=Y+1; i<l, i++){ 
    table += i%2 === 0 ? "<tr class='odd'>" : "<tr class='even'>"; 
    table += '<th>'+i+'</th>'; 
    for(var n=1,c=x+1; n<c; n++){ 
     if(i === 0){ 
     table += '<th>'+n+'</th>'; 
     } 
     else{ 
     table += '<td>'+i*n+'</td>'; 
     } 
    } 
    table += '</tr>'; 
    } 
    return table + '</tbody></table>'; 
} 
document.getElementById('id').innerHTML = multiplicationTable(12); 
console.log(multiplicationTable(15, 25)); 
Смежные вопросы