ダイナミック生成されたhtmlコントロールが正確な行の値を送信できません

Question

ダイナミックに生成されたコントロールを持つHTMLテーブルから正確な行の値を取得する際に問題があります。この値に基づいて、DBへのユーザ入力を更新する関数を呼び出すことになります。私は、変更イベント

<table id='TFtable'> 
 

 
<tr> <td align='left'> <input type="button" value="Add More Task" onClick="addRow('TFtable')" name="Add Task"></td> </tr> 
 

 
</table> 
 

 
<script> 
 
var rowcount; 
 
function addRow(tableID) 
 
{ 
 
rowcount =document.getElementById(tableID).rows.length; 
 
rowcount=rowcount-2; 
 
rowcount=rowcount+1; 
 
var table = document.getElementById(tableID); 
 

 
var row = table.insertRow(-1); 
 

 
label = row.insertCell(0); 
 
var element6 = document.createElement("Label"); 
 
element6.id="sno"+rowcount; 
 
element6.name="sno"+rowcount; 
 
label.innerHTML=rowcount; 
 
label.appendChild(element6); 
 

 

 

 
var cel1l = row.insertCell(1); 
 
var element1 = document.createElement("select"); 
 
element1.id="Category"+rowcount; 
 
element1.name="Category"+rowcount; 
 
element1.onchange =function(){getrowcount(rowcount);}; 
 
element1.className="selectBox"; 
 

 
var option1 = document.createElement("option"); 
 
option1.value ="Automation-Work"; 
 
option1.text ="Automation-Work"; 
 
element1.appendChild(option1); 
 

 
var option1a = document.createElement("option"); 
 
option1a.value ="Document-Work"; 
 
option1a.text ="Document-Work"; 
 
element1.appendChild(option1a); 
 

 
cel1l.appendChild(element1); 
 

 

 
} 
 

 
function getrowcount(rowvalue) 
 
{ 
 
alert (rowvalue); 
 
} 
 
</script>

Answer 1

次のコードは、現在のrowIndexプロパティを記録しますドロップダウンで行の値を取得する必要があります。そのためには、trという親要素がparentNodeプロパティを使用して、selectのchange関数内で見つかるでしょう。

var selectArr = document.querySelectorAll('select') 
 
selectArr.forEach(function(item){ 
 
item.addEventListener("change",function(e){ 
 
    console.log(e.target.parentNode.parentNode.rowIndex) 
 
},false); 
 
})

table, td { 
 
    border:1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td><select> 
 
    <option>123</option> 
 
    <option>45</option> 
 
    </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
     <td><select> 
 
    <option>123</option> 
 
    <option>45</option> 
 
    </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
     <td><select> 
 
    <option>123</option> 
 
    <option>45</option> 
 
    </select> 
 
    </td> 
 
    </tr> 
 
</table>