Кнопка Нажмите, чтобы добавить строку в таблицу

Question

Моя задача - сделать страницу со столом и кнопкой. Когда пользователь нажимает кнопку, в таблицу добавляется одна строка. Итак, у меня есть кнопка на моей странице html (<button id="my_button">Bla-bla</button>), и таблица (<table id="my_table">). И у меня есть отдельный файл для JavaScript. В этом файле я написал:

$(function() { 
    $(my_button).click(function(){    
     tbl = document.getElementById("my_table"); 
     row = tbl.insertRow(0);  
     var newCell = row.insertCell(0); 
     newCell.height=300; 
     newCell.innerHTML="Some New Text"; 
    }); 
}); 

Но есть проблема: когда я нажимаю кнопку, строка добавляется в течение нескольких миллисекунд, то он исчезает, и я вижу таблицу без новой строки снова. В чем проблема и как я могу ее решить?

Answer 1

здесь небольшой пример

HTML код

<table class="authors-list"> 
    <tr> 
     <td>author's first name</td><td>author's last name</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="text" name="first_name" /> 
     </td> 
     <td> 
      <input type="text" name="last_name" /> 
     </td> 
    </tr> 
</table> 
<a href="#" title="" class="add-author">Add Author</a> 

JQuery код

var counter = 1; 
jQuery('a.add-author').click(function(event){ 
    event.preventDefault(); 
    counter++; 
    var newRow = jQuery('<tr><td><input type="text" name="first_name' + 
     counter + '"/></td><td><input type="text" name="last_name' + 
     counter + '"/></td></tr>'); 
    jQuery('table.authors-list').append(newRow); 
}); 

видеть эту ссылку для работы этого кода http://jsfiddle.net/yUfhL/

Answer 2

Если вы собираетесь использовать jQuery для события click, вы можете использовать его последовательно в своем коде.

уступи пагубным: jsfiddle

$("#my_button").click(function(){    
    $("#my_table").append('<tr style="height:300px"><td>Some New text</td></tr>'); 
}); 

Answer 3

Не видя свой след на это может быть, как комментарий системы предположил, что форма представления и страница освежает.

Если это так, то простое решение заключается в использовании event.preventDefault() в обработчике:

$(function() { 
    $(my_button).click(function(){ 
     event.preventDefault();   
     tbl = document.getElementById("my_table"); 
     row = tbl.insertRow(0);  
     var newCell = row.insertCell(0); 
     newCell.height=300; 
     newCell.innerHTML="Some New Text"; 
    }); 

});

Вы ча подробнее о preventDefault в jquery docs

Как на другие ответы, если у вас есть доступ к JQuery, вы можете привести в порядок способ, используя его в коде.

Answer 4

<script type="text/javascript"> 
      $(document).ready(function(){   
       $(document).on("click","td.addNewButton",function(e) { 
        var row = $(this).parent().parent().children().index($(this).parent()); 
        var html = $('#myTable tbody tr:eq('+row+')').html(); 
        $('#myTable tbody tr:eq('+row+')').after('<tr>'+html+'</tr>'); 
       }); 
     }); 
    </script> 

Это будет хорошо для вас :)