添加行消失jquery

我已經編寫了數據庫更新的代碼。問題是在添加新行後，它顯示然後消失。此頁面在服務器端。我嘗試在Firefox中打開頁面以及Chrome，它顯示然後消失。問題是什麼？？添加行消失jquery

<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
     //$(function() { alert('hi') }) 
     $(document).ready(
      function() { 
       $("#AddRow").click(
        function() { 
         if ($('.checkbox').is(':checked')) { 
          { 
           //alert('hi') 
           var row = document.getElementById("row"); // find row to copy 
           var table = document.getElementById("tabletomodify"); // find table to append to 
           var clone = row.cloneNode(true); // copy children too 
           clone.id = "row0"; // change id or other attributes/contents 
           table.appendChild(clone); // add new row to end of table 

          } 

         } 
        } 

       ); 
      } 
     ); 
    </script> 
</head> 



<table cellpadding="10" style="border:2px solid black;" id="tabletomodify"> 

    <tr bgcolor="#360584"> 
     <td style="border:1px solid black;" colspan="15"><font face="Arial" size="4" color="white"><b><i>Records</i></b></font> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <button id="AddRow">Add Row</button> 
     </td> 
     <td> 
      <button id="DuplicateRow">Duplicate Row</button> 
     </td> 
     <td> 
      <button id="DeleteRow">Delete Row</button> 
     </td> 
    </tr> 
    <tr bgcolor="#360584"> 
     <td><font face="Arial" size="2" color="white">Name </font> 
     </td> 
     <td><font face="Arial" size="2" color="white">Date of Birth</font> 
     </td> 
     <td><font face="Arial" size="2" color="white">City</font> 
     </td> 
     <td><font face="Arial" size="2" color="white">State</font> 
     </td> 
     <td><font face="Arial" size="2" color="white">Country</font> 
     </td> 
     <td><font face="Arial" size="2" color="white">Phone Number</font> 
     </td> 
     <td><font face="Arial" size="2" color="white">Mail ID</font> 
     </td> 


     <td><font face="Arial" size="2" color="white">Select</font> 
     </td> 



     <tr id="row"> 
      <td> 
       <select></select> 
      </td> 
      <td> 
       <select></select> 
      </td> 
      <td> 
       <select></select> 
      </td> 
      <td> 
       <select></select> 
      </td> 
      <td> 
       <select></select> 
      </td> 
      <td> 
       <select></select> 
      </td> 
      <td> 
       <select></select> 
      </td> 
      <td> 
       <input type="checkbox" class="checkbox"> 
      </td> 

     </tr> 
</table>

來源

2013-10-31 user2753721

它似乎能夠在我製作的小提琴中正常工作......我選擇右側的方框並添加行，並保持在Chrome中。 http://jsfiddle.net/AdamDrummond/DzkB5/ – Adam

如果它出現，然後消失，似乎該頁面正在重新加載。 –

在adam創建的jsfiddle中粘貼代碼..現在工作正常.. – user2753721

-1

這裏是相同的HTML小提琴和清理的JavaScript：http://jsfiddle.net/krmFU/

$("#AddRow").click(function() { 
    if ($('.checkbox').is(':checked')) { 
     { 
      alert('hi'); 
      var row = document.getElementById("row"); // find row to copy 
      var table = document.getElementById("tabletomodify"); // find table to append to 
      var clone = row.cloneNode(true); // copy children too 
      clone.id = "row0"; // change id or other attributes/contents 
      table.appendChild(clone); // add new row to end of table 
     } 
    } 
}); 

<table cellpadding="10" style="border:2px solid black;" id="tabletomodify"> 
    <tr bgcolor="#360584"> 
     <td style="border:1px solid black;" colspan="15"><font face="Arial" size="4" color="white"><b><i>Records</i></b></font> 

     </td> 
    </tr> 
    <tr> 
     <td> 
      <button id="AddRow">Add Row</button> 
     </td> 
     <td> 
      <button id="DuplicateRow">Duplicate Row</button> 
     </td> 
     <td> 
      <button id="DeleteRow">Delete Row</button> 
     </td> 
    </tr> 
    <tr bgcolor="#360584"> 
     <td><font face="Arial" size="2" color="white">Name </font> 

     </td> 
     <td><font face="Arial" size="2" color="white">Date of Birth</font> 

     </td> 
     <td><font face="Arial" size="2" color="white">City</font> 

     </td> 
     <td><font face="Arial" size="2" color="white">State</font> 

     </td> 
     <td><font face="Arial" size="2" color="white">Country</font> 

     </td> 
     <td><font face="Arial" size="2" color="white">Phone Number</font> 

     </td> 
     <td><font face="Arial" size="2" color="white">Mail ID</font> 

     </td> 
     <td><font face="Arial" size="2" color="white">Select</font> 

     </td> 
    </tr> 
    <tr id="row"> 
     <td> 
      <select></select> 
     </td> 
     <td> 
      <select></select> 
     </td> 
     <td> 
      <select></select> 
     </td> 
     <td> 
      <select></select> 
     </td> 
     <td> 
      <select></select> 
     </td> 
     <td> 
      <select></select> 
     </td> 
     <td> 
      <select></select> 
     </td> 
     <td> 
      <input type="checkbox" class="checkbox" /> 
     </td> 
    </tr> 
</table>

來源

2013-10-31 18:54:26 Sam

對不起，但是-1。這些都不是必需的。 –

@BlueSkies感謝您的評論！ – Sam

如果你編輯你的答案，我可以撤銷。 –

這是一個老問題，但我最近也有類似的問題。原來，使用HTML標記<button>是問題。如果將按鈕放在表單中，則會導致頁面重新加載，這會導致您報告的問題。雖然您沒有按鈕，但您可能沒有在網頁上發佈到底是什麼內容？我懷疑是這種情況，因爲你的HTML中沒有body標籤。

最簡單的修復方法是使用< input type="button"/>代替。

來源

2016-03-08 18:09:37 OffTheBricks

添加行消失jquery

回答

相關問題