Weird динамическая таблица ошибка

Мой HTML:Weird динамическая таблица ошибка

<html> 
    <head> 
     <title>Table</title> 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
     <script type="text/javascript" src="script.js"></script> 
    </head> 
    <body> 
     Row:<input id="gRow">Col:<input id="gCol"><button onClick="selectCell()">Find</button> 
     <button onClick="addCol(); update();">Add Col</button><br/> 
     <button onClick="addRow(); update();">Add Row</button><br/> 
     <table id="tab"> 
      <tr class="rowtitle"> 
       <td></td> 
       <th>1</th> 
      </tr> 
      <tr class="row row-1"> 
       <th class="coltitle">1</th> 
       <td class="col col-1 edit"></td> 
      </tr> 
     </table> 
     <script type="text/javascript"> 
      update(); 
      function update(){ 
       $('.edit').bind('dblclick', function() { 
        $(this).attr('contentEditable', true); 
       }).blur(function() { 
        $(this).attr('contentEditable', false); 
       }); 
      } 
     </script> 
    </body> 
</html>

Мой Javascript:

nCol = 1, 
nRow = 1; 

var addCol = function(){ 
    nCol++; 
    //add nes cols 
    $('.rowtitle').append("<th class='title'>"+nCol+"</th>"); 
    for (var i = 0; i <= nCol; i++) { 
     $('.row-'+i).append("<td class = 'col col-" + i + " edit'></tr>"); 
    }; 

}; 

var addRow = function(){ 
    nRow++; 
    $("#tab").append("<tr class = 'row row-" + nRow + "'></tr>"); 

    $('.row-'+nRow).append("<th class='coltitle'>"+nRow+"</th>") 
    //add nes cols 
    for (var i = 1; i <= nCol; i++) { 
     $('.row-'+nRow).append("<td class = 'col col-" + i + " edit'></tr>"); 
    }; 
}; 

var selectCell = function(){ 
    var col = $('#gCol').val(), 
     row = $('#gRow').val(); 

    console.log('.row-'+row+' .col-'+col); 
    $('.row-'+row+' .col-'+col).css('background-color', 'red'); 
};

Когда я selectCell, я заметил, что это не работает. После осмотра я заметил, что ряды делают то, что им нужно, каждый раз уникальный класс. Тем не менее, столбцы будут повторяться несколько раз подряд. Как я могу это исправить?

Чтобы просмотреть, что происходит, создайте кучу строк и столбцов. Затем введите строку 3 и col 5. Это то, что должно произойти. Однако теперь тип 1 и 1. Demo

источник

2015-02-05 Bluedog111

Подсказка: '$ (это) .attr ('contentEditable', правда) .focus();' –

он ошибочен в любом случае: следовать этим шагам, чтобы увидеть проблему, нажмите: четыре times ** Добавить строку ** и четыре раза ** Добавить пол ** http://jsfiddle.net/xmrenvz7/2/ –

@ RokoC.Buljan Что делает .focus()? Я заметил ошибку. Вы знаете, как я могу это исправить? – Bluedog111

Ваш addCol прослушивается. Оно должно быть:

var addCol = function() { 
    nCol++; 
    //add nes cols 
    $('.rowtitle').append("<th class='title'>" + nCol + "</th>"); 
    $('.row').append("<td class = 'col col-" + nCol + " edit'></tr>"); 
};

источник

2015-02-05 03:57:17 tachyonflux

Все еще глючит: нажмите: четыре раза Add-Row и четыре раза Add-Col http://jsfiddle.net/xmrenvz7/2/ –

Удивительный. Еще одна вещь, которую я только заметил, заключается в том, что если вы нажмете новую строку дважды, то столбец 2 станет напуганным. Вы знаете, как это решить? – Bluedog111

@ RokoC.Buljan Я только что видел это тоже. Вы знаете, как я могу это исправить? – Bluedog111

Weird динамическая таблица ошибка

ответ

Смежные вопросы