動態添加行到一個html表與

我有一個以前的HTML代碼。動態添加行到一個html表與

<table width="600px" cellspacing="0" border="1" id="mainTable"> 
      <tr> 
       <th> 
        Name 
       </th> 
       <th> 
        full Name 
       </th> 
       <th> 
        Type 
       </th> 
      </tr> 
      <tr> 
       <td> 
        <input id="11" type="text" /> 
       </td> 
       <td> 
        <input id="12" type="text" /> 
       </td> 
       <td> 

        <select id="13"> 
        </select> 
       </td> 
      </tr> 
     </table> 
     <input type="button" onclick="return btnAddRow_onclick()"/>

我想jQuery的功能，將添加行與HTML元素和新的ID。例如，點擊後，將增加：

<tr> 
       <td> 
        <input id="21" type="text" /> 
       </td> 
       <td> 
        <input id="22" type="text" /> 
       </td> 
       <td> 

        <select id="22"> 
        </select> 
       </td> 
      </tr>

來源

2010-03-03 loviji

你的ID無效。 ID不能以數字開頭。 – rahul

您可以添加一個「模板」行，id =「template」將顯示設置爲無。當你想要一個新的行時，只需複製/克隆它並根據需要設置ID即可。 – scunliffe

我知道，這只是演示。快速瞭解我的問題。你可以把它看作'txt11'，txt12'; 'chb13' – loviji

喜歡的東西

<script> 
    $(function(){ 
     var currentID = 1; 

     $("#btn1").click(function(){ 
      currentID ++; 
      var htmlToAppend = "<tr><td><input id='txt" + currentID + "1' type='text' /></td><input id='txt" + currentID + "2' type='text' /></td><td><select id='cmb" + currentID + "3'></select></td></tr>"; 
      $("#mainTable").append (htmlToAppend); 

     }); 
}); 
</script> 
<table width="600px" cellspacing="0" border="1" id="mainTable"> 
      <tr> 
       <th> 
        Name 
       </th> 
       <th> 
        full Name 
       </th> 
       <th> 
        Type 
       </th> 
      </tr> 
      <tr> 
       <td> 
        <input id="txt11" type="text" /> 
       </td> 
       <td> 
        <input id="txt12" type="text" /> 
       </td> 
       <td> 

        <select id="cmb13"> 
        </select> 
       </td> 
      </tr> 
     </table> 
     <input type="button" id="btn1" value="Click me" />

來源

2010-03-03 13:45:30 rahul

動態添加行到一個html表與

回答

相關問題