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

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

最初，数据是按照如下方式加载的：您可以忽略与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();

实际上，当执行此代码时，wollowing消息作为警报“DataTables警告：table id=tablaDatosComprobacion”抛出-请求的第2行第1列的未知参数“1”。有关此错误的更多信息，请参阅'，其屏幕截图如下：

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

---

谢谢大家!

我同意bluehipy，我一次只允许一行处于编辑模式。 标记和跟踪更改并将更改发送回服务器更容易

然而，这里有一个更符合您所做工作的解决方案

我做的第一个重大改变是，我没有在服务器上创建输入和选择，而是使用DataTables来创建它们。这样，当添加新道路时，它知道如何设置它们的格式。在服务器上，我只是创建了一个基本的html表，其中只包含每个单元格中的数据。然后我使用渲染器添加选择或输入框

请注意，我添加了一个排序器，它将对数据进行排序，以便添加的行最终位于第一页的顶部

这段代码正在我的jsbin上运行

---

为什么不使用datatable行添加方法？TABLADATOSCOMPORBACION.row.add[values]。drawfalse@bluehipy这不是我正在使用的moethod吗？方法就在那里，但是你没有添加新的记录，而是添加一个html snipet。我建议只添加值[1,2,3,5,6,7]，让datatable按照它所知道的方式呈现它。如果您希望以不同的方式呈现该行，则应使用呈现器或对其进行编辑。正如他们所说，使用columns.render是最常用的方法，因为它提供了对将显示给最终用户的数据的绝对控制。这是一个常规Javascript函数，因此您可以对数据执行任何操作。更多信息：我也会使用这种编辑方法，因为并非所有字段都应该一次编辑：

var table = $('#example').DataTable( {
    columnDefs:[{targets:[0,1,3,4,5], type:"dom-text", render:function(data, type, row, meta){
        return "<input type='text' value='" +  data + "'>";
    }},
    {targets:[2], render : 
     function(data){return createSelect(data);}}           
               ]
});
$("#btnGo").on("click", function(){
    $("#example").DataTable().row.add(["","","","","",""]).draw();
})