![](/img/trans.png)
[英]store the user entered data in html table as a array variable for each column of the table when user submit the data
[英]perl cgi how to store/send data entered by user in dynamic table
在閱讀了該論壇的一些話題之后,我能夠創建一個CGI頁面,其中包含動態表。 現在,我需要捕獲在表中輸入的信息,並將其存儲在后端(我打算存儲到db中)。
有人可以告訴我怎么做。 我聽說可以使用jquery和AJAX完成。 但是我是Web技術的新手,不知道如何繼續使用它們。
注意 :正如我提到的那樣,它是一個動態表。 用戶可以根據需要添加/刪除行。 我需要捕獲所有這些數據。
這是我到目前為止嘗試過的
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> </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();
}
});
});
如果使用HTML構建動態表,並根據需要將用戶輸入提交給Perl腳本以進行進一步處理或分類,則將更加容易。
只需設計一個看起來像表格的HTML表單即可(您可以使用已經編寫的大多數代碼)。 要將其提交到perl腳本,您需要執行以下操作:
<form action="/somefolder/yourperlscript.pl" method="POST">
<!-- Your Table here -->
</form>
您可能還記得,在Linux中,文件的位置應以“ /somefolder/yourscript.pl”開頭,而在Windows上,文件的位置應以“ somefolder / yourscript.pl”開頭的斜杠開頭
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.