2014-10-27 103 views
0

所以我有這個功能,當我點擊添加按鈕時我不希望頁面刷新。你可以幫我嗎?ASP.NET - 不想頁面刷新

<div class="form-group"> 
      <label for="autores">Autores</label> 
      <textarea runat="server" class="form-control" rows="1" id="autores"></textarea> 
      <asp:Button runat="server" OnClientClick="addAutor();" Text="Add" CssClass="btn btn-default" AutoPostback=false /> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <table id="lista" contenteditable> 
      <tr> 
       <td><strong>Autores</strong></td> 
      </tr> 
     </table> 
     <script> 
      function addAutor() { 
       var table = document.getElementById("lista"); 
       var row = table.insertRow(1); 
       var cell1 = row.insertCell(0); 
       var cell2 = row.insertCell(1); 
       cell1.innerHTML = "NEW CELL1"; 
       cell2.innerHTML = "NEW CELL2"; 
       return false; 
      } 
     </script> 
    </div> 

行!所以...我也試着這樣做:

<table id="myTable"> 
      <tr> 
       <td>Row1 cell1</td> 
       <td>Row1 cell2</td> 
      </tr> 
      <tr> 
       <td>Row2 cell1</td> 
       <td>Row2 cell2</td> 
      </tr> 
      <tr> 
       <td>Row3 cell1</td> 
       <td>Row3 cell2</td> 
      </tr> 
     </table> 
     <br> 

     <button onclick="myFunction()">Try it</button> 

     <script> 
      function myFunction() { 
       var table = document.getElementById("myTable"); 
       var row = table.insertRow(0); 
       var cell1 = row.insertCell(0); 
       var cell2 = row.insertCell(1); 
       cell1.innerHTML = "NEW CELL1"; 
       cell2.innerHTML = "NEW CELL2"; 
      } 
     </script> 

與HTML按鈕...但它仍然無法正常工作,因爲它增加了內容的表,但頁面重新加載,而新的內容在前看不見。

+0

'OnClientClick =「return addAutor();」'應該已經有所作爲 – DoXicK 2014-10-27 16:18:06

+0

爲什麼你使用asp按鈕如果你不想發佈回到服務器?這是有點asp ...爲什麼不只是使用一個簡單的HTML按鈕?另外 - 如果你仍然有麻煩 - 請看javascript中的event.preventDefault()。 – 2014-10-27 16:21:25

+0

@doxick我想讓我的代碼做的是向表中添加一個新行。但是當頁面重新加載時,表格的新內容消失了。我希望在接口上發生這種情況,而不是打電話給服務器 – StackJP 2014-10-29 16:57:22

回答

1
<asp:button id="Button1" 
     text="Submit" 
     onclick="addAutor();" 
     usesubmitbehavior="false" 
     runat="server"/> 

設置usesubmitbehavior假更改按鈕從提交按鈕類別

我看你的樣品做工精細,可添加類型= 「按鈕」

  
 
      function myFunction() { 
 
       var table = document.getElementById("myTable"); 
 
       var row = table.insertRow(0); 
 
       var cell1 = row.insertCell(0); 
 
       var cell2 = row.insertCell(1); 
 
       cell1.innerHTML = "NEW CELL1"; 
 
       cell2.innerHTML = "NEW CELL2"; 
 
      } 
 
    
<table id="myTable"> 
 
      <tr> 
 
       <td>Row1 cell1</td> 
 
       <td>Row1 cell2</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Row2 cell1</td> 
 
       <td>Row2 cell2</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Row3 cell1</td> 
 
       <td>Row3 cell2</td> 
 
      </tr> 
 
     </table> 
 
     <br> 
 

 
     <button onclick="myFunction()">Try it</button>

+0

,這是行不通的。 – StackJP 2014-10-29 16:55:13

+0

我想讓我的代碼做的是向表中添加一個新行。但是當頁面重新加載時,表格的新內容消失了。 我希望在接口上發生這種情況,而不是打電話給服務器。 – StackJP 2014-10-29 16:56:41

+0

你的第二個示例工作正常,因爲我在我的答案中添加了 – 2014-10-29 19:36:33