如何从动态创建的行中获取值并将所有列和行值存储在数组中

高瑟姆·库希克

这是 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tasklist</title>
</head>

<body>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <div>
        <form>
            <input type="button" class="add-row" value="Add Row">
            <input type="button" class="load" value="Enter">
        </form>
        <table id='tablemain' class="table">
            <thead>
                <tr>
                    <th>SNo</th>
                    <th>Name</th>
                    <th>Assigned Task</th>
                    <th>Due Date</th>
                    <th>Status</th>
                    <th>Comments</th>
                </tr>
            </thead>
        </table>
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="script.js"></script>
</body> 
</html>

这是该代码的 Javascript

var status;
var sno = [];
var load;
var no_rows = 0;
var row;
$(document).ready(function () {
    $(".add-row").click(function () {
        row = "<tr id=tasklist><td>" + "<input type=text class=sno></input>" + "</td><td>" + "<input type=text class=pname></input>" + "</td><td>" + "<input type=text class=task></input>" + "</td><td>" + "<input type=text class=date></input>" + "</td><td>" + "<select class=status><option >Not Started</option><option>In progress</option><option>Finished</option></select>" + "</td><td>" + "<input type=text class=comment></input>" + "</td></tr>";
        $("table").append(row);
        $('.date').datepicker();
        //  $('.sno').css("background-color","blue");  
        $("select").change(function () {
                status = $(this).find('option:selected').text();
                if (status === "In progress") {
                    $(this).css("background-color", "#a1a1ff");
                    //$('.task').addClass("blue");
                }
                if (status === "Finished") {
                    $(this).css("background-color", "#54c654");
                    //$('.task').addClass("green");
                }
                if (status === "Not Started") {
                    $(this).css("background-color", "#F8F8F8");
                    //$('.task').addClass("white");
                }
            })
            ++no_rows;
    });

    $('.load').click(function () {
       //What should I write here
    });
});

单击输入按钮后，我需要加载数组中的所有行和列并将其显示在控制台中。例如，如果我们创建了一个两行的表，这里指定的列是常数，即 6。最终输出应该在两行 6 列的数组中。

蒙克德尔格·图门巴亚尔

你看起来像这个小提琴吗

var status;
var sno = [];
var load;
var no_rows = 0;
var row;
var mainArr = [];
var tmpArr = [];

function loadValues() {
  var mainTable = $('#tablemain');
  var tr = mainTable.find('tbody tr');
  tr.each(function() {
    tmpArr = []; // has to clean on every found for take every td values into array
    $(this).find('td').each(function() {

      var values = $(this).find('input, select').val();
      tmpArr.push(values);

    });
    mainArr.push(tmpArr);
  });
  console.log(mainArr);
}


$(document).ready(function() {
  $(".add-row").click(function() {
    row = "<tr id=tasklist><td>" + "<input type=text class=sno></input>" + "</td><td>" + "<input type=text class=pname></input>" + "</td><td>" + "<input type=text class=task></input>" + "</td><td>" + "<input type=text class=date></input>" + "</td><td>" + "<select class=status><option >Not Started</option><option>In progress</option><option>Finished</option></select>" + "</td><td>" + "<input type=text class=comment></input>" + "</td></tr>";
    $("table > tbody").append(row);
    $('.date').datepicker();
    //  $('.sno').css("background-color","blue");  
    $("select").change(function() {
        status = $(this).find('option:selected').text();
        if (status === "In progress") {
          $(this).css("background-color", "#a1a1ff");
          //$('.task').addClass("blue");
        }
        if (status === "Finished") {
          $(this).css("background-color", "#54c654");
          //$('.task').addClass("green");
        }
        if (status === "Not Started") {
          $(this).css("background-color", "#F8F8F8");
          //$('.task').addClass("white");
        }
      })
      ++no_rows;
  });

  $('.load').click(function() {
    loadValues();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <form>
    <input type="button" class="add-row" value="Add Row">
    <input type="button" class="load" value="Enter">
  </form>
  <table id='tablemain' class="table">
    <thead>
      <tr>
        <th>SNo</th>
        <th>Name</th>
        <th>Assigned Task</th>
        <th>Due Date</th>
        <th>Status</th>
        <th>Comments</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

一些小的 HTML 改变和

数组输出看起来像

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

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

编辑于 2021-07-3

我来说两句

0 条评论

登录后参与评论

上一篇：根据不同的关键字格式在 Scala Map 中搜索键

如何从动态创建的editText框中获取值并将输入的值保存到2d数组中

如何从对象中的所有键获取特定值并将其存储在数组中？

如何从表中获取随机行值并将其存储在数组中以分别调用

如何从动态创建的行中获取值并将所有列和行值存储在数组中

如何从动态创建的行中获取值并将所有列和行值存储在数组中

Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

SQL Server中的非确定性数据类型

Swift 2.1-对单个单元格使用UITableView

如何避免每次重新编译所有文件？

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

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

在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

HttpClient中的角度变化检测

在Wagtail管理员中，如何禁用图像和文档的摘要项？

如何了解DFT结果

Camunda-根据分配的组过滤任务列表

错误：找不到存根。请确保已调用spring-cloud-contract：convert

为什么此后台线程中未处理的异常不会终止我的进程？

构建类似于Jarvis的本地语言应用程序

使用分隔符将成对相邻的数组元素相互连接

您如何通过 Nativescript 中的 Fetch 发出发布请求？

通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）

使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面

使用 text() 獲取特定文本節點的 XPath