日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

jQuery表格添加數據并Ajax提交數據

作者：知其黑、受其白 更新時間： 2022-07-10 編程語言

閱讀目錄

  • 實現效果
    • HTML
    • php

實現效果

在這里插入圖片描述
在這里插入圖片描述

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<style>
    #mform{ margin: 10px;  }
    #mtable{ border-collapse: collapse; }
    #mtable thead th,#mtable thead td{ min-width: 120px; }
    #mdiv{ display: none; }
</style>

姓名：<input type="text" name="name" value="">&nbsp;&nbsp;
學歷：<input type="text" name="education" value="">&nbsp;&nbsp;
年齡：<input type="text" name="age" value="">&nbsp;&nbsp;
<input id="add" type="button" value="添加"><br>

<form id="mform" action="" method="post">
    <table id="mtable" border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>學歷</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody id="mtbody">
        </tbody>
    </table>
    <div id="mdiv"></div>
    <input id="sub" type="button" value="提交"><br>
</form>


<script>
$(function(){
    //添加tr
    $('#add').click(function(){
        var name = $("input[name='name']").val();
        var education = $("input[name='education']").val();
        var age = $("input[name='age']").val();
        var html = '';
        html += '<tr>';
        html += '<td class="name">'+name+'</td>';
        html += '<td class="education">'+education+'</td>';
        html += '<td class="age">'+age+'</td>';
        html += '</tr>';
        $('#mtbody').append(html);
    });

    //提交
    $('#sub').click(function(){
        $('#mdiv').html('');
        $.each($('#mtbody tr'),function(k){
            var name = $('.name', this).text();
            var education = $('.education', this).text();
            var age = $('.age', this).text();
            var html = '';
            html += '<input type="text" name="data[' + k + '][name]" value="' + name + '">';
            html += '<input type="text" name="data[' + k + '][education]" value="' + education + '">';
            html += '<input type="text" name="data[' + k + '][age]" value="' + age + '"><br>';
            $('#mdiv').append(html);
        });
        var data = $("#mform").serialize();
        $.ajax({
            type: "POST",
            data: data,
            url: "http://example.com/api/excel_import_export",
            dataType: 'json',
            success: function (json) {}
        });
    });
});
</script>
</body>
</html>

php

<?php
echo '<pre>';
print_r($_POST);
/*
結果為：
array:2 [
  "data" => array:2 [
    0 => array:3 [
      "name" => "wgchen"
      "education" => "撒"
      "age" => "都是"
    ]
    1 => array:3 [
      "name" => "wgchen阿薩德"
      "education" => "撒阿薩德"
      "age" => "都是阿薩德"
    ]
  ]
  "s" => "/api/excel_import_export"
]
*/

原文鏈接：https://blog.csdn.net/weiguang102/article/details/125545552

欄目分類
最近更新