jquery实现增加删除行的方法

2020-05-23 06:09:04易采站长站整理

                <input type=”text”  style=”width:300px” > 
            </td> 
            <td></td> 
        </tr> 
        <tr id=”option3″>  
            <td class=”oz-form-topLabel”>选项3:</td> 
            <td class=”oz-property” > 
                <input type=”text”  style=”width:300px”> 
            </td> 
            <td></td> 
        </tr> 
        <tr id=”option4″>  
            <td class=”oz-form-topLabel”>选项4:</td> 
            <td class=”oz-property” > 
                <input type=”text”  style=”width:300px”> 
            </td> 
            <td></td> 
        </tr> 
    </table> 
    <div style=”text-align: center;”> 
        <a href=”#” onclick=”addRow()”>添加一行</a> 
    </div> 
</div>

JS代码:
var rowCount=4;  //行数默认4行 
  
//添加行 
function addRow(){ 
    rowCount++; 
    var newRow='<tr id=”option’+rowCount+'”><td class=”oz-form-topLabel”>选项’+rowCount+’:</td><td class=”oz-property” ><input type=”text”  style=”width:300px”></td><td><a href=”#” onclick=delRow(‘+rowCount+’)>删除</a></td></tr>’; 
    $(‘#optionContainer’).append(newRow);