したがって、同じクラスを持つ複数のtrを持つこのテーブルがあります。このクラスを「同じ」と呼びましょう。これで、テーブルは動的になり、同じクラスで複数のtrを追加できます。現在、tr 内には、onchange が関数 type_switch を呼び出す select タグがあります。次に、type_switch は、選択されたオプションに応じて、その tr にいくつかの html コンテンツを追加するため、変更はすべてではなく、その特定の tr でのみ発生する必要があります。問題は次のとおりです。最初はすべて問題ありませんでしたが、tr 内の tr に html コンテンツを追加する場所を転送することにしたとき、すべてが機能しなくなりました。詳細については、type_switch のコードを次に示します。
function type_switch(elem,act_id){
var tr = $(elem).parent('td').parent('tr');
// var tr = ".actionrow";
var appendum = "";
if(act_id!=undefined)
appendum = "&action_id="+act_id;
$(tr).children('.type-label').html("<img src='<?php echo BASE_URL;?>admin/images/ajaxloader.gif' />");
$(tr).children('.type-selection').html("<img src='<?php echo BASE_URL;?>admin/images/ajaxloader.gif' />");
$.ajax({
url: "<?php echo BASE_URL;?>somewhere.php", data: "type="+$(elem).val()+"&method=get_type_criterions"+appendum, type: "POST", dataType: "json",
success: function(d){
if(d.error==0){
$(tr).children('.type-label').html(d.label);
$(tr).children('.type-selection').html(d.cont);
$(tr).children('.type-button').html(d.btn);
}
}
});
}
繰り返し追加できる tr のサンプル:
<tr class="action-row">
<td valign="top">hello </td>
<td valign="top"><select name="crm_action[[id]]">
<option value="add">Add to Group</option>
<option value="transfer">Transfer to Group</option>
</select>
</td>
<td valign="top">Action: </td>
<td valign="top">
<select name="funnel_type[[id]]" class="funnel-type" onchange="type_switch(this[,id])">
<?php
$sql_tg = "some select";
$res_tg = mysql_query($sql_tg);
while($tg = mysql_fetch_object($res_tg)){
$sql_t = "some select";
$res_t = mysql_query($sql_t);
if(mysql_numrows($res_t)>0){
echo "<optgroup label=\"{$tg->label}\">";
while($t = mysql_fetch_object($res_t)){
echo "<option value=\"".$t->id."\">".$t->funnel_type_label."</option>";
}
echo "</optgroup>";
}
}
?>
</select>
</td>
<td><img src="<?php echo BASE_URL?>admin/images/action_delete.png" title="Delete" onclick="delete_row(this)" style="cursor: pointer;" /></td>
//this is the part that i changed there should be no tr holding this 3 td but since the layout looks ugly and messy i decided to transfer it below.
<tr class="actionrow">
<td class="type-label" valign="top">[label]</td>
<td class="type-selection" valign="top">[selection]</td>
<td class="type-button" valign="top" align="right" colspan="2"></td>
</tr>
</tr>
生成された HTML コード:
<tr class="action-row">
<td valign="top">CRM Action: </td>
<td valign="top"><select name="crm_action[]">
<option value="add">Add to Group</option>
<option value="transfer">Transfer to Group</option>
</select>
</td>
<td valign="top">Action: </td>
<td valign="top">
<select name="funnel_type[]" class="funnel-type" onchange="type_switch(this)">
options to determine what to display in this tr onchange
</select>
</td>
<td>
<img src="somewhere/action_delete.png" title="Delete" onclick="delete_row(this)" style="cursor: pointer;"></td>
</tr>
//this part should have been inside the above tr as you can see it the php code above
<tr class="actionrow odd">
<td class="type-label" valign="top"></td>
<td class="type-selection" valign="top"></td>
<td class="type-button" valign="top" align="right" colspan="2"></td>
</tr>
//end
<tr class="action-row">
<td valign="top">CRM Action: </td>
<td valign="top">
<select name="crm_action[]"><option value="add">Add to Group</option>
<option value="transfer">Transfer to Group</option>
</select>
</td>
<td valign="top">Action: </td>
<td valign="top">
<select name="funnel_type[]" class="funnel-type" onchange="type_switch(this)">
another options
</select>
</td>
<td>
<img src="somewhere/action_delete.png" title="Delete" onclick="delete_row(this)" style="cursor: pointer;">
</td>
</tr>
<tr class="actionrow odd">
<td class="type-label" valign="top"></td>
<td class="type-selection" valign="top"></td>
<td class="type-button" valign="top" align="right" colspan="2"></td>
</tr>