阻止在jQuery中提交表单

Question

我想将数据添加到表中的选定单元格。我用JavaScript编写了这段代码。

var rowIndex = 10; 
var colIndex = 5; 
var dateTable = document.getElementById('timeTable'); 
dateTable.rows[rowIndex].cells[colIndex].innerHTML = "Su"; 

我想用同样的概念jQuery中为：

$('input[name=add_button]').click(function(e) { 
    var dateTable = document.getElementById('timeTable'); 
    var rowIndex = $('[name=days]').val(); 
    var colIndex = $('[name=times]').val(); 
    var text = $('input[name = text]').val(); 
    dateTable.rows[rowIndex].cells[colIndex].innerHTML = text; 
    e.preventDefault(); 
}); 

我的问题是：preventDefault()方法应该阻止我的形式提交。这并不妨碍表单提交。如果我删除dateTable.rows[rowIndex].cells[colIndex].innerHTML = text;行，表单不会被提交。我认为这条线有一些问题。请帮我分类。如果jQuery中有更好的选项可用，请告诉我。我将能够使用colIndex和rowIndex来查找单元格的位置。

感谢

Answer 1

试试这个：

在form tag像

<form onsubmit="return false;" ......> 

</form> 

还要检查你的索引，这些都是从0 or 1开始添加return false;，如果这些都是从1开始，那么你必须decrease it by 1使用前

像dateTable.rows[rowIndex-1].cells[colIndex-1].innerHTML = text;

其实当你点击button它会prevent其default behavior，而不是其他元素行为(form in your case)。

所以，我认为这是不可能阻止你的form在这里。

替代码你可以使用：

$('form#myForm').on('submit',function(e){ 
    e.preventDefault(); 
    var dateTable = document.getElementById('timeTable'); 
    var rowIndex = $('[name=days]').val(); 
    var colIndex = $('[name=times]').val(); 
    var text = $('input[name = text]').val(); 
    dateTable.rows[rowIndex].cells[colIndex].innerHTML = text; 
    return false; 
});