javasciprtを使用して動的に作成されたラジオボタンに動的に作成されたテキストボックスを表示

Question

json経由でデータを受信して​​いますが、入力に基づいて、あらかじめ選択されたラジオボタン（緑/黄/赤）値を入力します。 3番目の列には、コメントボックスが表示されています。

ここで、黄/赤のラジオボタンが入力された場合、または選択した場合のみ、コメントボックスを表示したいと考えています。ここで

は、使用中の私のコードです：

$(document).ready(function() { 
 
\t var appStatus = [{ 
 
\t \t "category": "Overall Status", 
 
\t \t "status": "0" 
 
\t }, { 
 
\t \t "category": "System Availability", 
 
\t \t "status": "1" 
 
\t }, { 
 
\t \t "category": "Whatever", 
 
\t \t "status": "2" 
 
\t }]; 
 
\t var tr; 
 
\t for (var i = 0; i < appStatus.length; i++) { 
 
\t \t \t tr = $('<tr/>'); 
 
\t \t \t tr.append("<td>" + appStatus[i].category + "</td>"); 
 
\t \t \t tr.append('<tr id="row' + i + '"><td><input type="radio" name="inlineRadioOptions_' + i + '[]" value="0" id="inlineRadio0"' + 
 
\t \t \t (appStatus[i].status == '0' ? ' checked="checked"' : '') + 
 
\t \t \t '><font color="black">Grey &emsp;</font><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" value="1" id="inlineRadio1"' + 
 
\t \t \t (appStatus[i].status == '1' ? ' checked="checked"' : '') + 
 
\t \t \t '><font color="green">Green &emsp;</font><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio2" value="2"' + 
 
\t \t \t (appStatus[i].status == '2' ? ' checked="checked"' : '') + 
 
\t \t \t '><font color="yellow">Yellow &emsp;</font></label><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio3" value="3"' + 
 
\t \t \t (appStatus[i].status == '3' ? ' checked="checked"' : '') + '> <font color="red">Red</font></label><td></tr>'); 
 
\t \t \t //tr.append("<td>" + "<input>" + appStatus[i].comments + "</input>" + "</td>"); 
 
\t \t \t tr.append("<td>" + '<tr id="row' + i + '"><td><input type="text" id="appStatus[i].comments" name="appStatus[i].comments" placeholder="Comments" class="form-control name_list" required' + "</td>"); 
 
\t \t \t $('table').append(tr); \t } 
 

 

 
\t $('#result').on('click', function() { 
 
\t \t var new_status = []; 
 
\t \t $('.table tbody tr').each(function() { 
 
\t \t \t new_status.push({ 
 
\t \t \t \t category: $(this).find('td:eq(0)').text(), 
 
\t \t \t \t status: $(this).find(':radio:checked').val() 
 
\t \t \t }); 
 
\t \t }); 
 

 
\t \t console.log(new_status); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-hover"> 
 
    <thead> 
 
    <th>Category</th> 
 
    <th>Status</th> 
 
    <th>Comments</th> 
 
    </thead> 
 
</table>

Answer 1

は、各無線入力にハンドラを追加します。 jQueryを使用しているため、添付されているイベントハンドラのイベントソースはthisです。これを達成するには、より長い<tr>...</tr>ブロックを分離する必要があります。

簡単な例：

table.append('<tr/>').append(
    $('<td>').append(
     $('<input type="radio" name="x">').change(function() { 
      $(this).closest('td').find('input.comments').toggle(true or false); 
     }) 
    ) 
) 

...しかし、あなたは賢くなり、これより明確使用して変数を書くことができます。

<tr>要素がコード内で別の要素の内側に追加されているため、無効なHTMLが表示されることもあります。加えて、作業が必要なその他の小さな不具合もあります。