Question

我遇到了一个问题，现在正在吃我的时间。我有一个包含7条记录的表（例如），这个表有输入和textarea元素，用户可以输入。现在分页的值为每页5条记录，我有两页。用户将数据输入到评论部分，点击分页中的“下一个”并在评论部分输入值。因此，从技术上讲，用户将值输入到两个页面中，并由数据分页逻辑分割。问题是，当用户点击保存时，它只保存那些在焦点上的元素，更容易理解在页面上可见的元素。我阅读了API和常见问题解答，并明确指出数据表隐藏了不在焦点的元素，这使得它们几乎不可能在DOM中找到。下面是代码，我需要帮助，如何使用fnGetHiddenTrNodes（）方法从隐藏行获取数据，创建隐藏元素并在提交表单之前将它们附加到现有的可见表元素。我尝试了以下代码，但它无法正常工作。

    $("#form").on("submit",function(){
       if($("#form").valid()){

           var nNodes = oTable.fnGetHiddenTrNodes();
           for ( var i=0 ; i<nNodes.length ; i++ )
           {
               var nHidden = document.createElement( 'input' );
               nHidden.type = 'hidden';
               nHidden.name = "hidden_input_"+i;
               nHidden.value = $('input', nNodes).val();

               //alert(nHidden.value);
               this.appendChild( nHidden );
           }

           $("#form").submit();   


       }else {
           validator.focusInvalid();
           return false;
       }

   });

非常感谢任何帮助。

Answer 1

$("#form").on("submit",function(){
    if($("#form").valid()){

       //Loop through the TR records
       oTable.$("tr").each(function(index, nRow){
            //Select the input from the row
            //var rowInput = $("input", nRow);
            //Select the text area from the row
            //var rowTextarea = $("textarea", nRow);

            //Add to form
            var nHidden = document.createElement( 'input' );
            nHidden.type = 'hidden';
            nHidden.name = "hidden_input_"+index;

            //Assuming there is one input per row
            nHidden.value = $("input", nRow).val();
            //alert(nHidden.value);
            $("#form").append( nHidden );
        });

        $("#form").submit();         
    }else {
        validator.focusInvalid();
        return false; 
    }    
});

Answer 2

好的。！是时候结束了。感谢@Bret给我一个方向。下面是最终工作的代码片段 -

      $("#form").on("submit",function(){
        if($("#form").valid()){

            var nNodes = oTable.fnGetHiddenTrNodes();

                    $('td', nNodes).each(function(index,ncolumn) {

                        var nHidden = document.createElement( 'input' );
                        nHidden.type = 'hidden';
                        nHidden.name = $("input", ncolumn).attr("name");
                        nHidden.value = $("input", ncolumn).val();

                        if(typeof(nHidden.name)  != "undefined")
                        $("#form").append( nHidden );

                        nHidden = document.createElement( 'input' );
                        nHidden.type = 'hidden';
                        nHidden.name = $("textarea", ncolumn).attr("name");
                        nHidden.value = $("textarea", ncolumn).val();

                        if(typeof(nHidden.name)  != "undefined")
                        $("#form").append( nHidden );

                        nHidden = document.createElement( 'input' );
                        nHidden.type = 'hidden';
                        nHidden.name = $("textarea", ncolumn).attr("name");
                        nHidden.value = $("textarea", ncolumn).val();

                        if(typeof(nHidden.name)  != "undefined")
                        $("#form").append( nHidden );

                        nHidden = document.createElement( 'input' );
                        nHidden.type = 'hidden';
                        nHidden.name = $("select", ncolumn).attr("name");
                        nHidden.value = $("select", ncolumn).attr("value");

                        if(typeof(nHidden.name)  != "undefined")
                        $("#form").append( nHidden );

                    });

            clickedSave = true;


        }else {
            validator.focusInvalid();
            return false;
        }

    });

感谢。

从datatable获取隐藏的行内容并将其与表单一起提交

2 个答案: