在数据表中以编程方式添加行时选择不呈现

我想以编程方式添加一行（数据来自模态）。我知道有一个函数叫做add row。

最初用thymeleaf加载数据如下（可以忽略与thymeleaf相关的每一段代码）：

<div class="table-responsive">
<table 
    id="tablaDatosComprobacion" 
    class="table table-striped"
    style="height:0px; min-height:30vh;">
    <thead>
        <tr>
            <th>NIF</th>
            <th>Nombre</th>
            <th>Primer Apellido</th>
            <th>Segundo Apellido</th>
            <th>Fecha de nacimiento</th>
            <th>Servicios Web</th>
            <th></th>
        </tr>
    </thead>
    <tbody id="tablaDatosComprobacionBody">
        <tr th:each="dato : *{datosComprobaciones}" th:id="|row${dato.id}|">
            <td>
                <input 
                    type="text" 
                    th:id="|nif${dato.id}|"
                    th:value="${dato.nif}"/>
            </td>
            <td>
                <input
                    type="text" 
                    th:id="|nombre${dato.id}|"
                    th:value="${dato.nombre}" />
            </td>
            <td>
                <input
                    type="text" 
                    th:id="|pa${dato.id}|"
                    th:value="${dato.apellido1}" /> 
            </td>
            <td>
                <input
                    type="text" 
                    th:id="|sa${dato.id}|"
                    th:value="${dato.apellido2}" /> 
            </td>
            <td>
                <input
                    type="date" 
                    th:id="|fn${dato.id}|"
                    th:value="${#temporals.format(dato.fechaNacimiento, 'yyyy-MM-dd')}" /> 
            </td>
            <td>
                <select 
                    th:id="|sw${dato.id}|" 
                    class="selectpicker"
                    multiple="multiple"
                    data-container='body' 
                    data-actions-box='true' 
                    data-selected-text-format='count > 2'>
                    <th:block th:each="sw : ${serviciosweb}">
                        <option 
                            th:id="${sw}" 
                            th:value="${sw}" 
                            th:if="${#lists.contains(dato.serviciosWeb, sw)}"
                            selected="selected" 
                            th:text="${sw}"></option>
                        <option 
                            th:id="${sw}" 
                            th:value="${sw}" 
                            th:unless="${#lists.contains(dato.serviciosWeb, sw)}"
                            th:text="${sw}"></option>
                    </th:block>
                </select>
            </td>
            <td>
                <input 
                    type="hidden" 
                    th:id="|id${dato.id}|" 
                    th:value="${dato.id}" />
                <a class="btn btn-default" th:id="|borrarDato${dato.id}|" role="button" href="#"><i class="fa fa-times" aria-hidden="true"></i></a>
            </td>                                                   
        </tr>
    </tbody>
</table>

这是它的外观：.

当我单击一个按钮时，会打开一个模式，以便用户可以输入新行的数据。当用户在模态中单击添加时，会以这种方式添加一个新行：

var tablaDatosComprobacion = $("#tablaDatosComprobacion").DataTable(
// ... some ignorable code
var idNewRow = 3;
var newRowToAdd = 
    "<tr id='row" + idNewRow + "'>" +
    "<td>" +
    "<input type='text' id='nif" + idNewRow + "' value='" + addCompDiarNifVal + "' />" + 
    "</td>" + 
    "<td>" +
    "<input type='text' id='nombre" + idNewRow + "' value='" + addCompDiarNombreVal + "' />" + 
    "</td>" + 
    "<td>" +
    "<input type='text' id='pa" + idNewRow + "' value='" + addCompDiarPrimerApellidoVal + "' />" + 
    "</td>" +
    "<td>" +
    "<input type='text' id='sa" + idNewRow + "' value='" + addCompDiarSegundoApellidoVal + "' />" + 
    "</td>" +
    "<td>" +
    "<input type='date' id='fn" + idNewRow + "' value='" + addCompDiarFechaNacimientoVal + "' />" + 
    "</td>" +
    "<td>";

var listaServiciosWeb = [[${serviciosweb}]];
newRowToAdd +=
    "<select class='selectpicker' multiple data-container='body' data-actions-box='true' data-selected-text-format='count > 3' id='sw" + idNewRow + "'>" ;
_.each(listaServiciosWeb, function(sw){
    var optionSeleccionado = _.contains(addCompDiarServiciosWebVals, sw.$name);
    if(optionSeleccionado){
        newRowToAdd +=  
        "<option id='" + sw.$name + "' selected='selected' value='" + sw.$name + "'>" + sw.$name + "</option>";
    }else{
        newRowToAdd += 
        "<option id='" + sw.$name + "' value='" + sw.$name + "'>" + sw.$name + "</option>";
    }
});
newRowToAdd +=
    "</select>";
newRowToAdd += 
    "</td>" + 
    "<td>" + 
    "<input type='hidden' id='id" + idNewRow + "' value='" + idNewRow + "' />" +
    "<a class='btn btn-default' id='borrarDato" + idNewRow + "' role='button' href='#'><i class='fa fa-times' aria-hidden='true'></i></a>" + 
    "</td>" +                                                   
    "</tr>";
var trNewRowParsed = $.parseHTML(newRowToAdd);
tablaDatosComprobacion.row.add(trNewRowParsed).draw();

实际上，当执行此代码时，会抛出以下消息作为警报“DataTables 警告：table id=tablaDatosComprobacion - Requested unknown parameter '1' for row 2, column 1。有关此错误的更多信息，请参阅http:// datatables.net/tn/4 '，其截图如下：

那么，如何以编程方式添加新行？我究竟做错了什么？

谢谢！