Question

在阅读了这个论坛的几个主题后，我能够创建一个CGI页面，其中包含动态表格。现在我需要捕获表中输入的信息并将其存储在后端（我计划存储到db中）。

有人可以告诉我它是怎么做到的。我听说可以使用jquery和AJAX完成。但我是网络技术的新手，不知道如何继续使用它们。

注意：正如我提到它的动态表格。用户可以根据需要添加/删除行。我需要捕获所有这些数据。

这是我到目前为止所尝试的

Perl CGI脚本

#!C:\Program Files\Perl\bin\perl
use strict;
use warnings;
use CGI qw{ :standard };
use CGI::Carp qw{ fatalsToBrowser };
print_page_header();
print_html_head_section();


#################
## Subroutines ##
#################
sub print_page_header {
    print "Content-type:  text/html\n\n";
}


sub print_html_head_section {
    print "<head>\n";
    print "<title>sample test page</title>\n";
    print "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'  type='text/javascript'></script>\n";
     print "<script src='../js/mastertable_rowcontrol.js'  type='text/javascript'></script>\n";
    #print qq{
    #       <script>
    #       function myFunction() {
    #       var table=document.getElementById("master_table");
    #       for (var i=1;i<table.rows.length;i++) {
    #       alert(table.rows.[i].cells[0].innerHTML);
    #       }
    #       }
    #       </script>
    #       };
    print "</head>\n";
}

print qq{
     <table id="master_table" border="0">
     <tr>
     <th>COL1</th>
     <th>COL2</th>
     <th>COL3</th>
     <th>COL4</th>
     <td>&nbsp;</td>
     </tr>
     <tr>
     <td>
     <input type="text" name="col1" class="col1"/>
     </td>
         <td>
     <input type="text" name="col2" class="col2"/>
     </td>
         <td>
     <input type="text" name="col3" class="col3"/>
     </td>
         <td>
     <input type="text" name="col4" class="col4"/>
     </td>
         <td>
     <input type="button" name="addRow" class="add" value='Add'/>
     </td>
         <td>
     <input type="button" name="removeRow" class="removeRow" value='Delete'/>
     </td>
     </tr>
     <tr>
     <td colspan="4" align="center">
     <input type="button" name="submit_data" class="submit" value="Submit" onclick="myFunction()"/>
     </td>
     </tr>
     </table>
     };

jquery用于创建动态表

$(document).ready(function () {
  $(document).on('click','#master_table .add',function () {

       var row=$(this).closest('tr');
       var clone = row.clone();
       var tr= clone.closest('tr');
       tr.find('input[type=text]').val('');
       $(this).closest('tr').after(clone);
       var $span=$("#master_table tr");
       $span.attr('id',function (index) {
       return 'span' + index;
});
  });

  $(document).on('click','#master_table .removeRow',function () {
      if ($('#master_table .add').length > 1) {
         $(this).closest('tr').remove();
        }

    });

});

Answer 1

如果使用HTML构建动态表，并根据需要将用户输入提交到Perl脚本以进行进一步处理或分类，则会更容易。

只需设计一个看起来像表的HTML表单（您可以使用已编写的大部分代码）。要将其提交到perl脚本，您需要执行以下操作：

<form action="/somefolder/yourperlscript.pl" method="POST">

<!-- Your Table here -->

</form>

你可能还记得，在Linux中你的文件的位置应该以“/somefolder/yourscript.pl”开头，而在Windows上，它应该是在开头的斜杠“somefolder / yourscript.pl

perl cgi如何存储/发送用户在动态表中输入的数据

1 个答案: