动态添加表中的行

Question

假设我们在gridview中选择该行，然后从gridview中获得一个数字。 假设我们从gridview得到8个数字，然后如何在带有文本框的html表中添加八行。 有可能吗，以及它如何与jquery .append（）结合使用，请提前感谢。

Answer 1

我不确定我是否正确理解了这个问题，但是是的，使用jquery可能并且非常简单。 您的脚本应类似于：

function appendTable(numberOfRows) {
        var row = '<tr><td><input type="text" class="yourInput"></td></tr>'; //you should change this for your needs
        for (var i = 0; i < numberOfRows; i++) {
            $('#yourTable').append(row);
        }
    }

Answer 2

这是添加行和删除行的完整示例：

<!DOCTYPE html>
<html>
<head>
<title>Add / Remove Row</title>
<link rel="stylesheet" type="text/css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" 
src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".btn-add").on('click', function() {
            var singleRow = $(".singleRow").eq(0).clone();

            singleRow.find('.btn-add')
                .removeClass('btn-succcess')
                .addClass('btn-danger')
                .removeClass('btn-add')
                .addClass('remove')
                .html("X");

            singleRow.find('input').each(function(i, input) {
                $(input).val('');
            });

            $("#wrapper").append(singleRow);
        });

        $(document).on('click', ".remove", function() {
            $(this).parent().remove();
        });
    });
</script>
<style type="text/css">
    .singleRow {
        padding: 10px 0;
    }
</style>
</head>

<body>
    <div class="container">
    <form role="form" autocomplete="off" id="wrapper">
        <div class="row singleRow">
            <div class="col-md-3">
                <input class="form-control" name="name[]" type="text">
            </div>
            <div class="col-md-3">
                <input class="form-control" name="phone[]" type="text">
            </div>
            <div class="col-md-1">
                <select name="opt[]" class="form-control">
                    <option>1</option>
                    <option>2</option>
                </select>
            </div>
            <button type="button" class="btn btn-success btn-add">
                +
            </button>
        </div>
    </form>
    </div>
</body>    
</html>

动态添加表中的行

问题描述

2 个解决方案

解决方案1
3 2016-12-14 05:17:00

解决方案2
-1 已采纳 2016-12-14 06:32:18

动态添加表中的行

问题描述

2 个解决方案

解决方案1 3 2016-12-14 05:17:00

解决方案2 -1 已采纳 2016-12-14 06:32:18

解决方案1
3 2016-12-14 05:17:00

解决方案2
-1 已采纳 2016-12-14 06:32:18