搜索
搜索

如何将表 td 数据转换为特定行的 JSON？

Tony S 发表于 Dev
22
托尼

嗨，我有动态数据，如果有的话，我正在生成 HTML 表格。现在我想分别提交每一行。但我无法从每一列中获取数据。请指导。这是我的表结构：

<table id="tblQuizzes" class="table table-striped">
<thead>
    <tr>

        <th>Student Name</th>
        <th>AGN Test 1</th>
        <th>Assignment</th>
        <th>Food Chef</th>
    </tr>
</thead>
<tbody>
    <tr id="tr_1">
        <td>
            Studet 1


        </td>
        <td>
            <input name="Id_1_2" value="29" form="form1" type="hidden">
            <input class="Id" style="width:30px;" value="9.00" name="1_2" form="form1">
            /10.00                                                <input name="OldValue_1_2" value="9.00" form="form1" type="hidden">



        </td>
        <td>
            <input name="Id_1_3" value="" form="form1" type="hidden">
            <input class="Id" style="width:30px;" value="" name="1_3" form="form1">
            /10.00                                                <input name="OldValue_1_3" value="" form="form1" type="hidden">



        </td>
        <td>
            <input name="Id_1_4" value="19" form="form1" type="hidden">
            <input class="Id" style="width:30px;" value="5.50" name="1_4" form="form1">
            /10.00                                                <input name="OldValue_1_4" value="5.50" form="form1" type="hidden">



        </td>
        <td><input class="btn btn-primary actions" form="form1" value="Save" type="submit"></td>
    </tr>
    <form method="POST" id="form1" action="Controller/Method"></form>


    <tr id="tr_2">
        <td>Student 2</td>
        <td>
            <input name="Id_2_2" value="" form="form2" type="hidden">
            <input class="Id" style="width:30px;" value="" name="2_2" form="form2">
            /50.00                                                <input name="OldValue_2_2" value="" form="form2" type="hidden">



        </td>
        <td>
            <input name="Id_2_3" value="22" form="form2" type="hidden">
            <input class="Id" style="width:30px;" value="17.00" name="2_3" form="form2">
            /50.00                                                <input name="OldValue_2_3" value="17.00" form="form2" type="hidden">



        </td>
        <td>
            <input name="Id_2_4" value="" form="form2" type="hidden">
            <input class="Id" style="width:30px;" value="" name="2_4" form="form2">
            /50.00                                                <input name="OldValue_2_4" value="" form="form2" type="hidden">



        </td>
        <td><input class="btn btn-primary actions" form="form2" value="Save" type="submit"></td>
    </tr>
    <form method="POST" id="form2" action="Controller/Method"></form>


    <tr id="tr_3">
        <td>
            Student 3


        </td>
        <td>
            <input name="Id_3_2" value="" form="form3" type="hidden">
            <input class="Id" style="width:30px;" value="" name="3_2" form="form3">
            /50.00                                                <input name="OldValue_3_2" value="" form="form3" type="hidden">



        </td>
        <td>
            <input name="Id_3_3" value="30" form="form3" type="hidden">
            <input class="Id" style="width:30px;" value="0.00" name="3_3" form="form3">
            /50.00                                                <input name="OldValue_3_3" value="0.00" form="form3" type="hidden">



        </td>
        <td>
            <input name="Id_3_4" value="" form="form3" type="hidden">
            <input class="Id" style="width:30px;" value="" name="3_4" form="form3">
            /50.00                                                <input name="OldValue_3_4" value="" form="form3" type="hidden">



        </td>
        <td><input class="btn btn-primary actions" form="form3" value="Save" type="submit"></td>
    </tr>
    <form method="POST" id="form3" action="Controller/Method"></form>




</tbody>

我想要这样的数据：

    [
{
id: 1,
newValue:"assignment",
oldValue:5,
},
{
id: 2,
newValue:"assignment",
oldValue:5,
},
{
id: 3,
newValue:"assignment",
oldValue:5,
}
]

这里的 HiddenField1 在 TD==Id，第二个输入文本框是 newValue，第三个 hiddenfild 是“oldValue”

马卡兰·帕蒂尔

我不太确定，但我认为你想要这样的东西。请参阅下面的代码片段。

请注意，我添加e.preventDefault();只是为了防止提交操作以在控制台中记录输出。您需要将其删除。

$(document).ready(function() {
  $('input[type="submit"]').click(function(e) {
    var output = [];
    $(this).parents('tr').find('td:gt(0):lt(3)').each(function() {
      var obj = {
        id: $(this).find('input')[0].value,
        newValue: $(this).find('input')[1].value,
        oldValue: $(this).find('input')[2].value
      };
      output.push(obj);
    });
    console.log(output);
    e.preventDefault();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblQuizzes" class="table table-striped">
  <thead>
    <tr>
      <th>Student Name</th>
      <th>AGN Test 1</th>
      <th>Assignment</th>
      <th>Food Chef</th>
    </tr>
  </thead>
  <tbody>
    <tr id="tr_1">
      <td>Studet 1</td>
      <td>
        <input name="Id_1_2" value="29" form="form1" type="hidden">
        <input class="Id" style="width:30px;" value="9.00" name="1_2" form="form1"> /10.00
        <input name="OldValue_1_2" value="9.00" form="form1" type="hidden">
      </td>
      <td>
        <input name="Id_1_3" value="" form="form1" type="hidden">
        <input class="Id" style="width:30px;" value="" name="1_3" form="form1"> /10.00
        <input name="OldValue_1_3" value="" form="form1" type="hidden">
      </td>
      <td>
        <input name="Id_1_4" value="19" form="form1" type="hidden">
        <input class="Id" style="width:30px;" value="5.50" name="1_4" form="form1"> /10.00
        <input name="OldValue_1_4" value="5.50" form="form1" type="hidden">
      </td>
      <td><input class="btn btn-primary actions" form="form1" value="Save" type="submit"></td>
    </tr>
    <form method="POST" id="form1" action="Controller/Method"></form>
    <tr id="tr_2">
      <td>Student 2</td>
      <td>
        <input name="Id_2_2" value="30" form="form2" type="hidden">
        <input class="Id" style="width:30px;" value="" name="2_2" form="form2"> /50.00
        <input name="OldValue_2_2" value="" form="form2" type="hidden">
      </td>
      <td>
        <input name="Id_2_3" value="22" form="form2" type="hidden">
        <input class="Id" style="width:30px;" value="17.00" name="2_3" form="form2"> /50.00
        <input name="OldValue_2_3" value="17.00" form="form2" type="hidden">
      </td>
      <td>
        <input name="Id_2_4" value="" form="form2" type="hidden">
        <input class="Id" style="width:30px;" value="" name="2_4" form="form2"> /50.00
        <input name="OldValue_2_4" value="" form="form2" type="hidden">
      </td>
      <td><input class="btn btn-primary actions" form="form2" value="Save" type="submit"></td>
    </tr>
    <form method="POST" id="form2" action="Controller/Method"></form>
    <tr id="tr_3">
      <td>
        Student 3
      </td>
      <td>
        <input name="Id_3_2" value="31" form="form3" type="hidden">
        <input class="Id" style="width:30px;" value="" name="3_2" form="form3"> /50.00
        <input name="OldValue_3_2" value="" form="form3" type="hidden">
      </td>
      <td>
        <input name="Id_3_3" value="30" form="form3" type="hidden">
        <input class="Id" style="width:30px;" value="0.00" name="3_3" form="form3"> /50.00
        <input name="OldValue_3_3" value="0.00" form="form3" type="hidden">
      </td>
      <td>
        <input name="Id_3_4" value="" form="form3" type="hidden">
        <input class="Id" style="width:30px;" value="" name="3_4" form="form3"> /50.00
        <input name="OldValue_3_4" value="" form="form3" type="hidden">
      </td>
      <td><input class="btn btn-primary actions" form="form3" value="Save" type="submit"></td>
    </tr>
    <form method="POST" id="form3" action="Controller/Method"></form>
  </tbody>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将数据从 JSON 循环到数据表中的 TH 和 TD？

如何将数据表转换为json

将JSON转换为TR和TD

json表数据如何限制td的长度？

如何将层次表转换为json

如何将json格式表转换为excel？

如何将 JSON 树转换为动态 HTML 表

如何将表转换为Json数组？

如何将 Pandas 表值转换为特定的 json 格式？

如何将存储在json文件中的td类存储到html表中（使用Ajax）

如何将两个数据库表转换为多维JSON文件？

如何将Json表（数组数组）数据转换为C＃对象的集合

如何将 JSON 数据转换为 objet 以便稍后将其用于表？

如何将 json 数据转换为特定别名并在 mysql 中使用逗号分隔值

如何将熊猫数据框转换为特定的json格式

如何将 json 转换为数据框，根据分隔符将默认行转换为新列？

如何将 JSON 转换为 JSON 行

如何将此JSON转换为数据表？

如何将R中的JSON数据转换为非一行

如何将HTML POST数据转换为JSON？

如何将 JSON 数据从 postgres 转换为不同的格式

如何将JSON转换为数据框

如何将 SQLAlchemy 数据转换为 JSON 格式？

如何将python数据框转换为JSON

如何将嵌套的 JSON 对象转换为数据框？

如何将嵌套的json结构转换为数据框

如何将数据转换为标准json

如何将JSON数据转换为不带键的数组？

如何将JSON数据转换为Python对象

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  3. 3

    如何检查字符串输入的格式

  4. 4

    如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

  5. 5

    Modbus Python施耐德PM5300

  6. 6

    错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

  7. 7

    用日期数据透视表和日期顺序查询

  8. 8

    检查嵌套列表中的长度是否相同

  9. 9

    Java Eclipse中的错误13，如何解决？

  10. 10

    ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

  11. 11

    如何监视应用程序而不是单个进程的CPU使用率？

  12. 12

    如何自动选择正确的键盘布局？-仅具有一个键盘布局

  13. 13

    ES5的代理替代

  14. 14

    在令牌内联程序集错误之前预期为 ')'

  15. 15

    有什么解决方案可以将android设备用作Cast Receiver？

  16. 16

    套接字无法检测到断开连接

  17. 17

    如何在JavaScript中获取数组的第n个元素？

  18. 18

    如何将sklearn.naive_bayes与（多个）分类功能一起使用？

  19. 19

    应用发明者仅从列表中选择一个随机项一次

  20. 20

    在Windows 7中无法删除文件（2）

  21. 21

    ggplot：对齐多个分面图-所有大小不同的分面

热门标签

归档