在jquery中单击按钮后动态添加新行

Add a new row dynamically after clicking a button in jquery

本文关键字：动态 添加 新行 按钮 jquery 单击      更新时间：2023-09-26

我必须创建一个表单，它可以在单击按钮后动态添加行，下面是代码。因此，基本上，我想在单击下一行中的btAdd按钮后克隆具有id="ADD"的行。

我不知道在append函数中添加什么？我试过一些东西，但都不起作用。提前谢谢。

$(document).ready(function(){
    $("#btAdd").click(function(){
        $("#ADD").append(" ");
    });
});

    </script>
</head>
<body>
    <h1></h1>
    <div id = "myDiv">
        <form name="form1">
            <table border='1' width='700' align="center" cellpadding='5' cellspacing='10'>
                <tr>
                    <th>Place configuration here</th>
                </tr>
                <tr>
                    <td>Server Url: <input type="text" name="surl" id="surl"></td>
                </tr>
                <tr>
                    <td>            
                        Filter Name: <input type="text" name="fname"id="fname">
                        Filter Type
                        <select name="operation">
                            <option value="text">Text</option>
                            <option value = "List">List</option>
                        </select>
                    </td>
                </tr>
                <tr id="ADD">
                    <td>
                        Filter Options: <input type="text" name="foptions"id="foptions">
                        <input type="button" name="ADDb" value="+" id="btAdd">
                    </td>
                </tr>
                <tr>
                    <td>
                        Filter Label: <input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
                    </td>
                </tr>
                <tr>
                    <td><input type="button" name="submitb" id="submitb" value="Submit"></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

试试看：

$("#btAdd").click(function(){
    $("#ADD").clone().removeAttr("id").insertAfter("#ADD");
});

试试这个

$("#btAdd").click(function(){
  $("#ADD").clone().attr("id","ADD_"+$("#table1 tbody").children("tr").length).insertAfter("#ADD");   
});

其中table1是表id。

<!DOCTYPE HTML>
<html>
<head>
    <style>
    #myDiv { margin: 0 auto; width: 800px; }
    .tr { clear: both; border: 1px solid #ccc; margin: 0 0 10px; padding: 5px; overflow: hidden; }
    .tr .label { float: left; width: 115px; }
    .tr .inputs { float: left; width: 230px; }
    .tr .btns { float: left; width: 100px; }
    .tr ul { margin: 0; padding: 0; }
    .tr li { list-style: none; }
    </style>
</head>
<body>
<div id = "myDiv">
    <form name="form1">
        <div class="tr">
            Place configuration here 
        </div>
        <div class="tr">
            Server Url:
            <input type="text" name="surl" id="surl">
        </div>
        <div class="tr">
            Filter Name:
            <input type="text" name="fname" id="fname">
            Filter Type
            <select name="operation">
                <option value="text">Text</option>
                <option value = "List">List</option>
            </select>
        </div>
        <div class="tr" id="ADD">
            <div class="label">Filter Options:</div>
            <ul class="inputs">
                <li>
                    <input type="text" name="foptions[]"> <input type="button" name="ADDb" value="+" id="btAdd">
                </li>
            </ul>
        </div>
        <div class="tr">
            Filter Label:
            <input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
        </div>
        <div class="tr">
            <input type="button" name="submitb" id="submitb" value="Submit">
        </div>
    </form>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
    var S = '<li><input type="text" name="foptions[]"> <input type="button" name="rm" value="-" /></li>',
        $ul = $('#ADD ul'), $add = $('#ADD');
    $add.on('click.add', '#btAdd', function() {
        $ul.append(S);
    });
    $add.on('click.rm', '[name=rm]', function() {
        $(this).closest('li').remove();
    });
});
</script>
</body>
</html>
相关文章：