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

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

jquery

Jquery 如何从动态创建的行中获取值并将所有列和行值存储在一个数组中,jquery,html-table,Jquery,Html Table,这是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.jquer

这是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
    });
});

var状态；
var sno=[]；
无功负荷；
变量无行=0；
var行；
$（文档）.ready（函数（）{
$（“.add row”）。单击（函数（）{
行=“”+”+“+”+“+”+”+“+”+”+“+”+”未在进程中启动已完成“+”+”；
$（“表格”）。追加（第行）；
$（'.date'）.datepicker（）；
//$（'.sno'）.css（“背景色”、“蓝色”）；
$（“选择”）.change（函数（）{
状态=$（this）.find（'option:selected'）.text（）；
如果（状态==“正在进行”）{
$（this.css（“背景色”，“#a1a1ff”）；
//$（'.task'）.addClass（“蓝色”）；
}
如果（状态==“已完成”）{
$（this.css（“背景色”，“#54c654”）；
//$（'.task'）.addClass（“绿色”）；
}
如果（状态==“未启动”）{
$（this.css（“背景色”，“#f8”）；
//$（'.task'）.addClass（“白色”）；
}
})
++没有排；
});
$（'.load'）。单击（函数（）{
//我应该在这里写什么
});
});

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

您不需要jQuery来实现这一点。纯Javascript将完成这项工作。为每一行分配相同的类。例如

class=“table row”

并使用

document.querySelector

查询该类以接收节点列表

const nodeList = document.querySelector('.table-row');
// watch out! A nodeList is not an array 
// so you cannot use map, filter or other array functions,
// you need to parse nodeList to an array first. 
const array = Array.prototype.slice.call(nodeList);

现在您有了一个行数组。每行包含您指定的六列。因此，现在可以使用嵌套的for循环遍历行和每列

for(row of array){
   // a new row starts
   for(column of row.childNodes){
      // print the next column
      console.log(column.textContent);
   }
}

另外，您可能还想看看：

console.table（array）

，它将把漂亮的表格打印到浏览器/web控制台

你看起来像

var状态；
var sno=[]；
无功负荷；
变量无行=0；
var行；
var mainArr=[]；
var-tmpArr=[]；
函数loadValues（）{
var mainTable=$（“#tablemain”）；
var tr=mainTable.find（'tbody tr'）；
tr.each（函数（）{
tmpArr=[]；//必须清除找到的每个值，以便将每个td值放入数组中
$（this）.find（'td'）.each（function（）{
var values=$（this.find（'input，select'）.val（）；
tmpArr.push（值）；
});
主推力（tmpArr）；
});
控制台日志（mainArr）；
}
$（文档）.ready（函数（）{
$（“.add行”）。单击（函数（）{
行=“”+”+“+”+“+”+”+“+”+”+“+”+”未在进程中启动已完成“+”+”；
$（“表>正文”）。追加（行）；
$（'.date'）.datepicker（）；
//$（'.sno'）.css（“背景色”、“蓝色”）；
$（“选择”）.change（函数（）{
状态=$（this）.find（'option:selected'）.text（）；
如果（状态==“正在进行”）{
$（this.css（“背景色”，“#a1a1ff”）；
//$（'.task'）.addClass（“蓝色”）；
}
如果（状态==“已完成”）{
$（this.css（“背景色”，“#54c654”）；
//$（'.task'）.addClass（“绿色”）；
}
如果（状态==“未启动”）{
$（this.css（“背景色”，“#f8”）；
//$（'.task'）.addClass（“白色”）；
}
})
++没有排；
});
$（'.load'）。单击（函数（）{
loadValues（）；
});
});

斯诺
名称
分配的任务
到期日
地位
评论
我给你举个例子
第一：将行id更新为类：id=tasklist->class=tasklist
输入按钮的代码：
    $('.load').click(function () {
   //What should I write here\
   $(".tasklist").each(function(i){
        sno.push({
            sno: $(this).find(".sno").val(),
            pname: $(this).find(".pname").val()
            // add others properties to here
        });
   });
   console.log(sno);
});


var状态；
var sno=[]；
无功负荷；
变量无行=0；
var行；
var mainArr=[]；
var-tmpArr=[]；
函数loadValues（）{
var mainTable=$（“#tablemain”）；
var tr=mainTable.find（'tbody tr'）；
tr.each（函数（）{
tmpArr=[]；//必须清除找到的每个值，以便将每个td值放入数组中
$（this）.find（'td'）.each（function（）{
var values=$（this.find（'input，select'）.val（）；
tmpArr.push（值）；
});
主推力（tmpArr）；
});
控制台日志（mainArr）；
}
$（文档）.ready（函数（）{
$（“.add行”）。单击（函数（）{
行=“”+”+“+”+“+”+”+“+”+”+“+”+”未在进程中启动已完成“+”+”；
$（“表>正文”）。追加（行）；
$（'.date'）.datepicker（）；
//$（'.sno'）.css（“背景色”、“蓝色”）；
$（“选择”）.change（函数（）{
状态=$（this）.find（'option:selected'）.text（）；
如果（状态==“正在进行”）{
$（this.css（“背景色”，“#a1a1ff”）；
//$（'.task'）.addClass（“蓝色”）；
}
如果（状态==“已完成”）{
$（this.css（“背景色”，“#54c654”）；
//$（'.task'）.addClass（“绿色”）；
}
如果（状态==“未启动”）{
$（this.css（“背景色”，“#f8”）；
//$（'.task'）.addClass（“白色”）；
}
})
++没有排；
});
$（'.load'）。单击（函数（）{
loadValues（）；
});
});

斯诺
名称
分配的任务
到期日
地位
评论
@Gowtham Koushik这是一个理想的阵列，作为这个任务的输出标记，作为接受的答案吗