Question

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

单击Enter按钮后，我需要加载数组中的所有行和列，并将其显示在控制台中。例如，如果我们创建了一个包含两行的表，则此处指定的列为6的常数。最终输出应在其中包含两行和6列的数组内。

Answer 1

您看起来像This Fiddle

ssh

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();
  });
});

一些小的HTML更改了

数组输出看起来像

Answer 2

您不需要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控制台上打印漂亮的表。

Answer 3

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>

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>

Answer 4

我有一个例子给你。

首先：将行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);
});

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

4 个答案: