javascript - 从表格形式格式化序列化数据并选择数据-6ren

javascript - 从表格形式格式化序列化数据并选择数据

转载作者：行者123 更新时间：2023-12-03 01:32:51

我正在尝试从网页发送ajax发布数据，其中数据是从由表格、日期选择框和评论文本框组成的表单中获取的。然而，网站的这个特定部分不是静态的，因此该网页是在 GET 请求的 php 文件中构建的，并以 base64 返回以进行解码并添加到网站。

“主”页面上的 ajax 是:

$.ajax({
  type: "GET",
  url: 'backend/ajax/webpage.php',
  dataType: 'text',
  data: {
    message: 'UPDATE_WEBPAGE'
  },
  success: function(result) {
    $('#main-content').html(window.atob(result));
  },
  error: function(error) {}
});

这将返回一个冗长的表格，尽管我已在下面将其最小化。

    <div class="section__content section__content--p30">
    <div class="container-fluid" id="content">
        <div class="col-md-12">
            <div class="overview-wrap">
                <h2 class="title-1">Rosters</h2>
            </div>
            </br>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card" style="border-radius: 10px;">
                    <div class="card-header">
                        <strong class="card-title">Roster for week starting:<span class="input-group date" style="width: 20%;" id="date" data-target-input="nearest">
                        <input id="date-input" type="text" placeholder="Week starting" class="form-control datetimepicker-input" data-target="#date"/>
                            <span class="input-group-append" data-target="#date" data-toggle="datetimepicker">
                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            	</span>
                        	</span>
                        </strong>
                        <script>
                            $(function() {
                                $("#date").datetimepicker({
                                    format: 'D/M/YYYY',
                                    daysOfWeekDisabled: [0, 6]
                                });
                            });
                        </script>
                    </div>
                    <div class="card-body">
                        <form id="roster-form" action="">
                            <div class="form-group table-responsive table--no-card m-b-30">
                                <table id="roster" for="roster-form" class="table table-borderless table-earning" align="left">
                                    <thead align="left">
                                        <tr>
                                            <th>Name</th>
                                            <th>Monday</th>
                                            <th>Tuesday</th>
                                            <th>Wednesday</th>
                                            <th>Thursday</th>
                                            <th>Friday</th>
                                            <th>Saturday</th>
                                            <th>Sunday</th>
                                        </tr>
                                    </thead>
                                    <tbody align="left">
                                        <th id="$days[$day]" name="$days[$day]">
                                            <div class="rs-select2--trans rs-select2--md" style="background-color: transparent;">
                                                <select value="$name" name="$namestart" class="js-select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" style="background-color: transparent;max-width:5%;">
                                                    <option selected="selected" value="$pstime">$pstime</option>
                                                    ";
                                                    <option value="05:00 am">05:00 am</option>
                                                    <option value="05:30 am">05:30 am</option>
                                                    <option value="05:45 am">05:45 am</option>
                                                    <option value="06:00 am">06:00 am</option>
                                                    <option value="06:15 am">06:15 am</option>
                                                    <option value="06:30 am">06:30 am</option>
                                                    <option value="06:45 am">06:45 am</option>
                                                    <option value="07:00 am">07:00 am</option>
                                                    <option value="07:15 am">07:15 am</option>
                                                    <option value="07:30 am">07:30 am</option>
                                                    <option value="07:45 am">07:45 am</option>
                                                    <option value="08:00 am">08:00 am</option>
                                                    <option value="08:15 am">08:15 am</option>
                                                    <option value="08:30 am">08:30 am</option>
                                                    <option value="08:45 am">08:45 am</option>
                                                    <option value="09:00 am">09:00 am</option>
                                                    <option value="09:15 am">09:15 am</option>
                                                    <option value="09:30 am">09:30 am</option>
                                                    <option value="09:45 am">09:45 am</option>
                                                    <option value="10:00 am">10:00 am</option>
                                                    <option value="10:15 am">10:15 am</option>
                                                    <option value="10:30 am">10:30 am</option>
                                                    <option value="10:45 am">10:45 am</option>
                                                    <option value="11:00 am">11:00 am</option>
                                                    <option value="11:15 am">11:15 am</option>
                                                    <option value="11:30 am">11:30 am</option>
                                                    <option value="11:45 am">11:45 am</option>
                                                    <option value="12:00 pm">12:00 pm</option>
                                                    <option value="12:15 pm">12:15 pm</option>
                                                    <option value="12:30 pm">12:30 pm</option>
                                                    <option value="12:45 pm">12:45 pm</option>
                                                    <option value="1:00 pm">1:00 pm</option>
                                                    <option value="1:15 pm">1:15 pm</option>
                                                    <option value="1:30 pm">1:30 pm</option>
                                                    <option value="1:45 pm">1:45 pm</option>
                                                    <option value="2:00 pm">2:00 pm</option>
                                                    <option value="2:15 pm">2:15 pm</option>
                                                    <option value="2:30 pm">2:30 pm</option>
                                                    <option value="2:45 pm">2:45 pm</option>
                                                    <option value="3:00 pm">3:00 pm</option>
                                                    <option value="3:15 pm">3:15 pm</option>
                                                    <option value="3:30 pm">3:30 pm</option>
                                                    <option value="3:45 pm">3:45 pm</option>
                                                    <option value="4:00 pm">4:00 pm</option>
                                                    <option value="Close">Close</option>
                                                </select>
                                            </div>
                                            <div class="rs-select2--trans rs-select2--md" style="background-color: transparent;>
                                            <select value=" $name " name="$namefinish " class="js-select2 select2-hidden-accessible " style="background-color: transparent;max-width:5%; ">
                                                <option value="$pftime ">$pftime</option>
                                                "; <option value="05:00 am">05:00 am</option>
                                                <option value="05:30 am">05:30 am</option>
                                                <option value="05:45 am">05:45 am</option>
                                                <option value="06:00 am">06:00 am</option>
                                                <option value="06:15 am">06:15 am</option>
                                                <option value="06:30 am">06:30 am</option>
                                                <option value="06:45 am">06:45 am</option>
                                                <option value="07:00 am">07:00 am</option>
                                                <option value="07:15 am">07:15 am</option>
                                                <option value="07:30 am">07:30 am</option>
                                                <option value="07:45 am">07:45 am</option>
                                                <option value="08:00 am">08:00 am</option>
                                                <option value="08:15 am">08:15 am</option>
                                                <option value="08:30 am">08:30 am</option>
                                                <option value="08:45 am">08:45 am</option>
                                                <option value="09:00 am">09:00 am</option>
                                                <option value="09:15 am">09:15 am</option>
                                                <option value="09:30 am">09:30 am</option>
                                                <option value="09:45 am">09:45 am</option>
                                                <option value="10:00 am">10:00 am</option>
                                                <option value="10:15 am">10:15 am</option>
                                                <option value="10:30 am">10:30 am</option>
                                                <option value="10:45 am">10:45 am</option>
                                                <option value="11:00 am">11:00 am</option>
                                                <option value="11:15 am">11:15 am</option>
                                                <option value="11:30 am">11:30 am</option>
                                                <option value="11:45 am">11:45 am</option>
                                                <option value="12:00 pm">12:00 pm</option>
                                                <option value="12:15 pm">12:15 pm</option>
                                                <option value="12:30 pm">12:30 pm</option>
                                                <option value="12:45 pm">12:45 pm</option>
                                                <option value="1:00 pm">1:00 pm</option>
                                                <option value="1:15 pm">1:15 pm</option>
                                                <option value="1:30 pm">1:30 pm</option>
                                                <option value="1:45 pm">1:45 pm</option>
                                                <option value="2:00 pm">2:00 pm</option>
                                                <option value="2:15 pm">2:15 pm</option>
                                                <option value="2:30 pm">2:30 pm</option>
                                                <option value="2:45 pm">2:45 pm</option>
                                                <option value="3:00 pm">3:00 pm</option>
                                                <option value="3:15 pm">3:15 pm</option>
                                                <option value="3:30 pm">3:30 pm</option>
                                                <option value="3:45 pm">3:45 pm</option>
                                                <option value="4:00 pm">4:00 pm</option>
                                                <option value="Close">Close</option>
                                                </select>
                                                <span class="dropdown-wrapper" style="background-color: transparent;" aria-hidden="true"></span>
                                            </div>
                                        </th>
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="card" style="border-radius: 10px;">
                                        <div class="card-header">
                                            <strong class="card-title">
                                        		Comments
                                        	</strong>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <textarea class="form-control" id="roster-comments" rows="4"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" form="roster-form" class="btn btn-primary btn-lg btn-block">Submit Roster</button>
                                    <a href="#" id="download">Download Roster</a></br>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $("#roster-form").submit(function(e) {
            e.preventDefault();
            var roster = {};
            var data = JSON.stringify($("#roster-form").serializeArray());
            //I understand this is where i need to loop through the data and create the json object to send to rostersfunc.php although I'm lost.
            $.ajax({
                type: 'POST',
                url: 'backend/ajax/rostersfunc.php',
                dataType: 'json',
                data: {
                    message: "UPDATE_ROSTER",
                    data: data
                },
                success: function(result) {},
                error: function() {}
            });
        });
        $(document).ready(function() {
            $('.js-select2').select2({
                minimumResultsForSearch: -1
            });
        });
    });
</script>

我相信我需要循环遍历表单数据的 SerializeArray 输出或通过数据的序列化输出，并将 day_name_start/finish 剪切成 4 个部分，即日期、名称、开始/结束和值，尽管我未能做到这一点。

当前输出如下:

post data = [{
    "name": "monday_bob_start",
    "value": "x am/pm"
}, {
    "name": "monday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "tuesday_bob_start",
    "value": "x am/pm"
}, {
    "name": "tuesday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "wednesday_bob_start",
    "value": "x am/pm"
}, {
    "name": "wednesday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "thursday_bob_start",
    "value": "x am/pm"
}, {
    "name": "thursday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "friday_bob_start",
    "value": "x am/pm"
}, {
    "name": "friday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "saturday_bob_start",
    "value": "x am/pm"
}, {
    "name": "saturday_bob_finish",
    "value": "y am/pm"
}, {
    "name": "sunday_bob_start",
    "value": "x am/pm"
}, {
    "name": "sunday_bob_finish",
    "value": "y am/pm"
}]

我正在努力实现这一目标:

roster = {
	"monday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"tuesday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"wednesday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"thursday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"friday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"saturday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	},
	"sunday": {
		"bob": {
			"startTime": x,
			"finishTime": y
		}
	}
}

最佳答案

迭代 postData 中的元素
将 name 值除以 _，以获取包含所需 JSON 内路径的数组
在名册中创建此路径
将值分配给名册中的给定路径

    var roster = {};
    var postData = $("#roster-form").serializeArray();
    var len = postData.length, i, elem;
    for(i=0; i<len; i++)
    {
      var path = postData[i].name.split("_");
      elem = roster;
      while(path.length)
      {
        key = path.shift();
        if(path.length)
        {
          if(typeof elem[key] === "undefined") elem[key] = {};
          elem = elem[key];    
        }
      }
      elem[key] = postData[i].value;
    }

关于javascript - 从表格形式格式化序列化数据并选择数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51202350/

文章推荐： visual-c++ - 为什么在 C++ 类定义中使用 public ref

文章推荐： elasticsearch - kubernetes上的Filebeat-排除 namespace 不起作用

文章推荐： php - PEAR - 仍然相关吗？

文章推荐： azure - Azure Bastion 是否具有 AAD 凭据

Java - toString 格式化(格式化 double )
我正在从事的项目需要使用 toString 方法打印银行帐户余额。我不允许向当前程序添加任何方法，但我需要将 myBalance 变量格式化为 double 型，该变量保留两位小数而不是一位。在这个特
c# - C++ 格式化，如 Visual Studio C# 格式化
我喜欢 Visual Studio (2008) 格式化 C# 代码的方式；不幸的是，在编写 C++ 代码时，它的行为方式似乎有所不同。比如我这样写代码的时候: class Test { publi
Java 格式化
Scanner scan = new Scanner(System.in); System.out.println("Enter three positive integers seperated b
c# - 格式化
在 aspose(使用 C#)中用于格式化数字的正确样式属性是什么。我想做两件事: 1) 将五位数字格式化为邮政编码。(我不太确定使用哪个 Style 属性来获取自定义 excel 邮政编码格式) 2
Java int 格式化？
我希望用户输入从 00 到 23 和从 00 到 59 的 Local.Time 的小时和分钟，我将其扫描为一个 int。它有效，但对于从 00 到 09 的值，int 忽略 0，然后将其放置为 0,
vba - 格式化(动态)
大家好，请查看上面的图片，我有两张 table 。在下面代码的第一个表中，我得到了这种格式。但我想像 Table2 那样格式化，每个合并单元格中的行数是动态的，而且不一样。有没有办法像table
Laravel created_at 格式化
我在一个 laravel 网站工作，我只是想知道是否有办法为用户格式化 created_at 值，因为现在它类似于以下内容: 2017-09-20 13:41 但我更愿意将其格式化为易于阅读的格式，例
java - 格式化 HTMLEditorKit
我正在尝试在 JTextPane 中进行一些基本的格式化。为此，我决定使用 html(HTMLDocument 和 HTMLEditorKit)。这里是按钮的操作监听器代码，应使所选文本变为粗体 b
ESlint 格式化 - 排队声明？
是否有规则或插件会导致 es-lint 错误或警告，如果范围内的声明没有像下面那样间隔，赋值运算符的对齐方式相同？ var a = 'a'; var bb = 'b'; var ccc = 'd
java - 格式化 LinkedHashMap
我正在尝试重新格式化 LinkedHashMap 的输出以排除逗号和大括号。这是我的看跌期权: token.put("[Server.Protocol]", url.getProtocol() +
python - 马尔可夫分析、格式化
我有一个程序，可以从文本文件中读取大量文本，然后根据文本内容随机化内容以显示为短篇故事。该程序可以运行，但最后一部分(我显示的 Material )非常笨重且效率不高，我想知道是否有人对如何更有效地获
VIM 格式化/对齐
我正在尝试将 VIM 作为我的 ruby/rails 编辑器。太胖了，我对它的功能印象深刻并且我能够安装以下插件以提供更好的 IDE 体验自动配对 Better-snipmate-snippe
java - JTextPane 格式化
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
Jquery 格式化 - 在另一个函数完成后运行函数
我有两个 jQuery 函数。我想先运行下面的第一个，然后在该函数完成后运行另一个。通常我会在代码的第一部分添加一个函数，但不确定如何使用这个 block 来做到这一点，或者它是否是正确的方法。简而
Python 在打印时对列表进行换行/格式化
在 Python 2.7 中，我有一个包含数字 1-25 字符串的列表(例如)。打印它们时，我希望列表打印 5 行，每行 5 个数字。理想情况下: >>> print(myList) ['1', '
C printf 格式化
我有以下功能来打印借阅者已取出的书籍列表。 void searchBorrowerLoans(int a) { int i; for (i = 1
java - 格式化 JTextPane
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 5 年前。 Improv
Android TextView 格式化
我正在尝试实现一个用作 ListView header 的 TextView。我想对其进行格式化，以便我基本上有一个以第一行为中心的标题，然后是以下几行的附加信息。如何格式化文本/字符串以创建这种格式
PostgreSQL，格式化 float
我尝试格式化数字字段 select to_char(12315.83453, 'FM999999999999D9999') 在这种情况下一切正常。结果是 12315.8345 但是如果值在0到1之间
Java BigDecimal 格式化
我有一个带有 BigDecimal 字段的类。我把这个对象放到 JSP(Spring MVC)中。而且我需要显示十进制不带零的 BigDecimal 字段(20.00 就像 20)，这就是为什么我的

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 从表格形式格式化序列化数据并选择数据