Как получить доступ к значениям ячеек в строке таблицы, которая была отмечена флажком в Javascript?

Question

Мне было интересно, сможет ли кто-нибудь помочь мне с этим работать.

Я использую HTML для создания таблицы, которая имеет по крайней мере 1 строку, но не содержит максимальное количество строк - так как они могут быть добавлены / удалены пользователем - и 4 столбца, 1-й содержит флажок, а 2-й содержат отбрасывание вниз меню.

Я хочу иметь возможность хранить значения этих меню в массиве, только если флажок этой строки был установлен. например, если первая строка имеет 1 и A в качестве выпадающих значений, а вторая строка имеет 2 и B. Если проверена только строка 1, массив должен содержать только [1, A]. Вместо этого у меня есть все значения, включая не проверенные, т.е. [1, A, 2, B].

Мой код для функции Javascript и HTML-таблицы приведен ниже:

function calculate(textID) {
  var table = document.getElementById('course'); //id of table
  var rowCount = table.rows.length;
  var array = []; //array to hold the values
  var c = 0;

  dmenus = document.getElementByTagName("select"); //get the drop down menus

  for (var a = 1; a < rowCount; i++) { //a = 1 as the 1st row contains column headings
    var row = table.rows[a];
    var check = row.cells[0].childNodes[0];
    if (null != check && true == check.checked) {
      for (var b = 0; b < dmenus.length; b++) {
        val = dmenus[b].options[dmenus[b].selectedIndex].value;
        array[c] = val; //set index of array to equal value of dropdown box
        c++;
      }
    } else {
      b++;
    }
  }
 

<table id="course">
  <tr>
    <td><input type="checkbox" name="ucheck" id="ucheck" onclick="checkAll('course')" /></td>
    <th style="color:white">Course Title</th>
    <th style="color:white">Credits</th>
    <th style="color:white">Grade</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="tick" id="tick" /></td>
    <td><input type="text" /></td>
    <td>
      <select name="credits" id="credits">
                    <option...</select></td>
    <td>
      <select name="grade" id="grade">
                    <option...</td>
 </table>

Он работает только для первого ряда, но если имеется более 1 строки, он не делает то, что должен. Платформа кодирования, над которой я работаю, похоже, не поддерживает JQuery, поэтому код Javascript будет наиболее полезен.

Answer 1

Наконец-то все заработало, немного переставил код. Вероятно, есть более эффективный способ сделать это, но эй, это работает для меня: D

var array = [];
var narray = [];
var a = 0;
var b = 0;
var c = 0;

ddownselects = document.getElementsByTagName("select");

//get all elements into one array
for (var j = 0; j < ddownselects.length; j++) {
  val = ddownselects[j].options[els[j].selectedIndex].value;
  array[a] = val;
  a++;
}

var rlen = array.length / 2; //number of rows
for (var i = 1; i <= rlen; i++) {
  var row = table.rows[i];
  var check = row.cells[0].childNodes[0];
  if (check.checked) {
    narray[b] = array[c]; //set array values to new array only if that row is checked
    b++;
    c++;
    narray[b] = array[c];
    b++;
    c++;
  } else {
    c += 2; //if not checked, got to next row's values
  }
 

<table id="course">
  <tr>
    <td><input type="checkbox" name="ucheck" id="ucheck" onclick="checkAll('course')" /></td>
    <th style="color:white">Course Title</th>
    <th style="color:white">Credits</th>
    <th style="color:white">Grade</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="tick" id="tick" /></td>
    <td><input type="text" /></td>
    <td>
      <select name="credits" id="credits">
                    <option...</select></td>
    <td>
      <select name="grade" id="grade">
                    <option...</td>