Javascriptのチェックボックスでチェックされているテーブルの行内のセルの値にアクセスするには？

Question

誰かがこの作業を手伝ってくれるかどうか疑問に思っていました。

私はHTMLを使用して少なくとも1行あり最大行数がないテーブルを作成しています - ユーザーが追加/削除できるように - そして4列、1列目にチェックボックス、2列目にドロップダウンメニュー。

これらのメニューの値は、その行のチェックボックスがオンになっている場合にのみ配列に格納することができます。たとえば、最初の行にドロップダウン値として1とAがあり、2番目の行に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>