Jquery实现表格行的添加、删除

JS、Jquery技术学习 https://www.itkc8.com  

先上效果图:(form中默认有4行)

 

表单代码:

 

  1. class="oz-form-fields"  style="width:450px;padding-top: 5px">  
  2.     "0" cellspacing="0" style="width:450px;" id="optionContainer">  
  3.         "option0">   
  4.             class="oz-form-topLabel">所属问题  
  5.                 if test="${questionType=='radio'}">(单选)if>  
  6.                 if test="${questionType=='checkbox'}">(复选)if>:  
  7.               
  8.             class="oz-property" >  
  9.                 ${question}  
  10.               
  11.               
  12.           
  13.         "option1">   
  14.             class="oz-form-topLabel">选项1:  
  15.             class="oz-property" >  
  16.                 "text"  style="width:300px">  
  17.               
  18.               
  19.           
  20.         "option2">   
  21.             class="oz-form-topLabel">选项2:  
  22.             class="oz-property" >  
  23.                 "text"  style="width:300px" >  
  24.               
  25.               
  26.           
  27.         "option3">   
  28.             class="oz-form-topLabel">选项3:  
  29.             class="oz-property" >  
  30.                 "text"  style="width:300px">  
  31.               
  32.               
  33.           
  34.         "option4">   
  35.             class="oz-form-topLabel">选项4:  
  36.             class="oz-property" >  
  37.                 "text"  style="width:300px">  
  38.               
  39.               
  40.           
  41.       
  42.     "text-align: center;">  
  43.         "#" οnclick="addRow()">添加一行  
  44.     
  
  •       

     

     

     

     

     

     

    JS代码:

     

    1. var rowCount=4;  //行数默认4行  
    2.   
    3. //添加行  
    4. function addRow(){  
    5.     rowCount++;  
    6.     var newRow='+rowCount+'">选项'+rowCount+':+rowCount+')>删除';  
    7.     $('#optionContainer').append(newRow);  
    8. }  
    9.   
    10. //删除行  
    11. function delRow(rowIndex){  
    12.     $("#option"+rowIndex).remove();  
    13.     rowCount--;  
    14. }  

     

     

    需要注意的是,表单的中需要定义ID,如果默认有行的,就如代码所示有规律地定义好ID,这样可以方便添加一行的时候定义新行ID。

    JS、Jquery技术学习 https://www.itkc8.com  

    JS中要定义一个行数变量,因为我的表单中默认了4行(第一行,即id='option0'这行可以不用管),所以JS中定义的rowCount默认为4.

    你可能感兴趣的:(Jquery)