Как получить значения из динамически создаваемых строк и сохранить все значения столбцов и строк в массиве

ProgramBox

Как получить значения из динамически создаваемых строк и сохранить все значения столбцов и строк в массиве

Post author:admin
Запись опубликована:7 января, 2022
Post category:Вопросы по программированию

#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.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 столбцами внутри.

Ответ №1:

Ты выглядишь как Эта Скрипка

 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 и

Вывод массива выглядит следующим образом

Ответ №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) это выведет красивую таблицу в браузер/веб-консоль.

Ответ №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>

Ответ №4:

У меня есть для вас пример.

Во-первых: обновите идентификатор строки до класса: id=список задач — > >класс=список задач

Код для кнопки ввода:

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