嘿，作为前端新手遇到这种动态表单的问题很正常，我帮你一步步搞定序号自动生成和多行数据提交的两个核心需求：

一、自动更新Sl.No.序号 #

你现在的代码新增行后序号是空的，删除行也不会重新排列，咱们写个专门的函数来统一更新所有行的序号，然后在新增、删除行的时候调用它就行：

修改后的JavaScript代码 #

$(function(){
    // 定义更新序号的函数
    function updateSerialNumbers() {
        $("#tb tr:not(.tr-header)").each(function(index) {
            // 序号从1开始，所以用index+1
            $(this).find("td:first input").val(index + 1);
        });
    }

    $('#addMore').on('click', function() {
        var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
        data.find("input").val('');
        // 新增行后立刻更新序号
        updateSerialNumbers();
    });

    $(document).on('click', '.remove', function() {
        var trIndex = $(this).closest("tr").index();
        if(trIndex>1) {
            $(this).closest("tr").remove();
            // 删除行后重新排序号
            updateSerialNumbers();
        } else {
            alert("Sorry!! Can't remove first row!");
        }
    });

    // 页面加载完成后先初始化一次序号
    updateSerialNumbers();
});

二、提交多行数据到后端 #

要让后端能接收所有行的数据，得把表单元素的name属性改成数组格式（比如name="type[]"），这样后端就能拿到对应字段的所有数据数组。

修改后的表单元素name属性 #

把每行的select和input的name改成数组形式：

<select type="text" name="type[]" class="form-control">
<input type="text" name="samplelocation[]" class="form-control" >
<input type="text" name="remarks[]" class="form-control">

后端（PHP）接收数据示例 #

后端可以通过$_POST获取数组，然后遍历处理每一行数据：

if(isset($_POST['add'])){
    // 获取所有行的对应数据数组
    $types = $_POST['type'];
    $locations = $_POST['samplelocation'];
    $remarks = $_POST['remarks'];

    // 遍历每一行数据
    foreach($types as $index => $type){
        $location = $locations[$index];
        $remark = $remarks[$index];
        // 这里写你的保存逻辑，比如插入数据库
        // 注意：实际开发一定要做SQL防注入处理（比如用PDO预处理）！
        // 示例：INSERT INTO samples (type, location, remark) VALUES (:type, :location, :remark)
    }
}

完整的修改后代码 #

<form method="post">
    <h4 style="color:darkGreen;"><u>SAMPLE INFORMATION</u></h4>
    <table class="table table-striped small-text" id="tb">
        <tr class="tr-header">
            <th class="col-md-1" align="centre">Sl.No.</th>
            <th class="col-md-2" align="centre">TYPE OF SAMPLE</th>
            <th class="col-md-2" align="centre">Sample Location</th>
            <th class="col-md-6" align="centre">Remarks</th>
            <th>
                <a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Sample">
                    <span class="glyphicon glyphicon-plus"></span>
                </a>
            </th>
        </tr>
        <tr>
            <td><input type="text" class="form-control" readonly></td>
            <td>
                <select type="text" name="type[]" class="form-control">
                    <option value="SELECT TYPE">SELECT TYPE</option>
                    <option value="BONE">BONE</option>
                    <option value="CARBONATE">CARBONATE</option>
                </select>
            </td>
            <td><input type="text" name="samplelocation[]" class="form-control"></td>
            <td><input type="text" name="remarks[]" class="form-control"></td>
            <td>
                <a href='javascript:void(0);' class='remove'>
                    <span class='glyphicon glyphicon-remove'></span>
                </a>
            </td>
        </tr>
    </table>
    <button type="submit" name="add" class="btn btn-info" align="middle">Add</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
    function updateSerialNumbers() {
        $("#tb tr:not(.tr-header)").each(function(index) {
            $(this).find("td:first input").val(index + 1);
        });
    }

    $('#addMore').on('click', function() {
        var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
        data.find("input").val('');
        updateSerialNumbers();
    });

    $(document).on('click', '.remove', function() {
        var trIndex = $(this).closest("tr").index();
        if(trIndex>1) {
            $(this).closest("tr").remove();
            updateSerialNumbers();
        } else {
            alert("Sorry!! Can't remove first row!");
        }
    });

    updateSerialNumbers();
});
</script>

<!-- 以下保持你原页面的尾部代码不变 -->
<?php include('includes/footer.php');?>
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>

几个小细节优化： #

• 我把原来嵌套在<tr>里的<h4>移到了table外面，修复了HTML结构错误
• 给序号输入框加了readonly属性，防止用户手动修改序号
• 后端代码示例里提示了SQL防注入，这是生产环境必须注意的安全点

内容的提问来源于stack exchange，提问作者DK JOSHI