Fatal编程技术网
  • javascript/
  • Javascript 如何使用jquery修改从CSV创建的表单

Javascript 如何使用jquery修改从CSV创建的表单

javascript php jquery html csv

Javascript 如何使用jquery修改从CSV创建的表单,javascript,php,jquery,html,csv,Javascript,Php,Jquery,Html,Csv,我在本地页面上显示了一个HTML/PHP表单，它是使用jquery和datatables脚本创建的。我想知道是否有可能显示表单的可编辑部分，用户可以在提交按钮上更改这些部分（提交按钮需要密码）。我在下面发布了我正在使用的代码，有index.html调用脚本运行，然后是script.js填充表 这是index.html代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten

我在本地页面上显示了一个HTML/PHP表单，它是使用jquery和datatables脚本创建的。我想知道是否有可能显示表单的可编辑部分，用户可以在提交按钮上更改这些部分（提交按钮需要密码）。我在下面发布了我正在使用的代码，有index.html调用脚本运行，然后是script.js填充表

这是index.html代码

 <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <title>DRP Freelancer List 2017 </title>

    </head>

<body>
<link rel="stylesheet" type="text/css" href="http://localhost:71/css/demo_page.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:71/css/demo_table.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:71/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:71/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:71/css/jquery-ui-1.10.1.custom.min.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:71/css/styles.css" />

<noscript>
    <div id="noscript_note">You must have JavaScript enabled to view this page.</div>
</noscript>

<div id="H3"><h3>DRP Freelancer List 2017 <div id="pic"><img src="http://localhost:71/images/pbooklogo.png"></img></h3>

<div id="loading" title="Loading">
<p>Freelancing List is loading...</p>
</div>



<div id="table_info"></div>
<div id="table_div"></div>

<script type="text/javascript" src="http://localhost:71/scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost:71/scripts/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="http://localhost:71/scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://localhost:71/scripts/DT_bootstrap.js"></script>
<script type="text/javascript" src="http://localhost:71/scripts/bootstrap-dropdown.js"></script>
<script type="text/javascript" `src="http://localhost:71/scripts/miso.ds.deps.ie.0.4.1.js"></script>`
<script type="text/javascript" src="http://localhost:71/script.js"></script>
<script type="text/javascript">
    $("#loading").dialog();
</script>

</body>
</html>


2017年自由职业者名单
必须启用JavaScript才能查看此页面。
2017年自由职业者名单
自由职业者列表正在加载

`
$（“#加载”）.dialog（）；
这是调用CSV文件的脚本。

// DataTables currency
// Use to sort the table via currency

// Where we'll put the data
var newDataSet = [];

// Our column headers
// Change these to fit your table
var tableColumnSet =   [
    { "sTitle": "Num", "sClass": "hidden" },
    { "sTitle": "Rating", "sClass": "center" },
    { "sTitle": "Confirmed On", "sClass": "center"},
    { "sTitle": "Employee" },
    { "sTitle": "Department" },
    { "sTitle": "Rate" },
    { "sTitle": "County"},
    { "sTitle": "Number", "sClass": "center" },
    { "sTitle": "Email", "sClass": "center" },
    { "sTitle": "Comments", "sClass": "center" },

];

// Our DataTable information
// Don't need to change anything here
// Unless you want to customize the table format
function showInfo() {
    $('#table_div').html( '<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="table"></table>' );

    // Push the data to the table
    $('#table').dataTable( {
        "bProcessing":true,
        "sPaginationType": "bootstrap",
        "iDisplayLength": 300,
        "aaData": newDataSet,
        "aoColumns": tableColumnSet,
        // Pick which column we will sort by default
        // For this table, we'll sort ascending by Total FY12 Salary
        "aaSorting": [[ 0, "asc" ]],
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
    });

    $( "#loading" ).dialog( "destroy" );
    $( "#loading" ).html( "" );
}

// Load up the CSV using Miso.Dataset
$(document).ready( function() {
    // Change URL to the right path for your CSV
    var ds = new Miso.Dataset({
        url : '/Freelancers/csvs/salary_book_clean.csv',
        delimiter : ','
    });

    // Run this after we load our CSV
    ds.fetch({ success : function() {
        this.each(function(row, rowIndex) {
            // Change these variables to match your column names
        var NumData = row.Num;
            var RatingData = row.Rating;
            var ConfirmedOnData = row.ConfirmedOn;
            var employeeData = row.Employee;
            var departmentData = row.Department;
            var RateData = row.Rate;
            var countyData = row.County;
            var NumberData = row.Number;
            var EmailData = row.Email;
            var CommentsData = row.Comments;
            // Put information in an array and push it to our table
            // Change these variables to match variables above
            var myArray = [NumData, RatingData, ConfirmedOnData, employeeData, departmentData, RateData, countyData, NumberData, EmailData, CommentsData];
            newDataSet.push(myArray);
        });
        // Call DataTable function showInfo
        showInfo();
        $().ready(function() {
    var regEx = /(\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)/;

    $("table td").filter(function() {
        return $(this).html().match(regEx);
    }).each(function() {
        $(this).html($(this).html().replace(regEx, "<a href=\"mailto:$1\">$1</a>"));
    });

    jQuery.fn.dataTableExt.aTypes.push(
    function ( sData )
    {
        var sValidChars = "0123456789,'£$.-";
        var Char;

        /* Check the numeric part */
        for ( i=1 ; i<sData.length ; i++ )
        {
            Char = sData.charAt(i);
            if (sValidChars.indexOf(Char) == -1)
            {
                return null;
            }
        }

        /* Check prefixed by currency */
        if ( sData.charAt(5) == '$' || sData.charAt(5) == '£' )
        {
            return 'currency';
        }
        return null;
    }
);
});


    }});
});

//数据表货币
//用于通过货币对表进行排序
//我们将把数据放在哪里
var newDataSet=[]；
//我们的列标题
//把这些换成适合你的桌子
var tableColumnSet=[
{“sTitle”：“Num”，“sClass”：“hidden”}，
{“针”：“等级”，“等级”：“中心”}，
{“缝合”：“已确认”，“sClass”：“中心”}，
{“缝合”：“雇员”}，
{“sTitle”：“Department”}，
{“针”：“速率”}，
{“sTitle”：“郡”}，
{“缝合”：“编号”，“sClass”：“中心”}，
{“sTitle”：“Email”，“sClass”：“center”}，
{“sTitle”：“Comments”，“sClass”：“center”}，
];
//我们的数据表信息
//不需要在这里更改任何内容
//除非您想自定义表格格式
函数showInfo（）{
$（'#table_div'）.html（''）；
//将数据推送到表中
$（“#表”）。数据表（{
“bProcessing”：正确，
“sPaginationType”：“引导程序”，
“iDisplayLength”：300，
“aaData”：新数据集，
“aoColumns”：tableColumnSet，
//选择默认情况下要排序的列
//对于此表，我们将按2012财年总工资升序排序
“aaSorting”：[[0，“asc”]]，
“语言”：{
“sLengthMenu”：“\u MENU\u每页记录”
}
});
$（“#加载”）。对话框（“销毁”）；
$（“#加载”）.html（“”）；
}
//使用Miso.Dataset加载CSV
$（文档）.ready（函数（）{
//将URL更改为CSV的正确路径
var ds=新的Miso.Dataset({
url:“/freegors/csvs/salary_book_clean.csv”，
分隔符：'，'
});
//在加载CSV后运行此命令
fetch（{success:function（））{
this.each（函数（行、行索引）{
//更改这些变量以匹配列名
var NumData=row.Num；
var评级数据=行评级；
var ConfirmedOnData=row.ConfirmedOn；
var employeeData=row.Employee；
var部门数据=行部门；
var RateData=行汇率；
var countyData=行。县；
var NumberData=行数；
var EmailData=row.Email；
var CommentsData=行注释；
//将信息放入数组并将其推送到表中
//更改这些变量以匹配上面的变量
var myArray=[NumData，RatingData，ConfirmedOnData，employeeData，departmentData，RateData，countyData，NumberData，EmailData，CommentsData]；
newDataSet.push（myArray）；
});
//调用DataTable函数showInfo
showInfo（）；
$（）.ready（函数（））{
var regEx=/（\w+（[-+.]\w+*@\w+（[-.]\w+*\.\w+）/；
$（“表td”）.filter（函数（）{
返回$（this.html（）.match（regEx）；
}).each（函数（{
$（this.html（$（this.html（）.replace）（regEx，“”）；
});
jQuery.fn.dataTableExt.aTypes.push(
功能（sData）
{
var sValidChars=“0123456789，£美元-”；
var-Char；
/*检查数字部分*/
对于（i=1；i