0

所以我有这个表有多个具有相同类的 tr，让我们称这个类“相同”现在表是动态的，这意味着我可以添加多个具有相同类的 tr。现在 tr 内部是一个 select 标记，onchange 将调用函数 type_switch，现在 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&nbsp;&nbsp;&nbsp;</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:&nbsp;&nbsp;&nbsp;</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:&nbsp;&nbsp;&nbsp;</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:&nbsp;&nbsp;&nbsp;</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:&nbsp;&nbsp;&nbsp;</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:&nbsp;&nbsp;&nbsp;</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>
4

1 回答 1

1

这是您可能需要的快速示例：

$('.select').change(function(){
    $(this).parent().append(*your html here*)
});

这会将信息附加到 tr 中，而不是选择框。

我相信这就是您要问的，如果不是，我将更改对您评论的回答。

编辑 OP 请求：为了能够更改 tr 内的特定元素，您可以将这些特定类与 .children()、.find() 和 .closest() 一起使用。这是一个例子：

$('.funnel-type').change(function(){
    var thisTr = $(this).parent().parent();
    thisTr.children('.type-label').html("something here");
    thisTr.children('.type-selection').html("something here");
    thisTr.children('.type-button').html("something here");
})

基本上，我制作了一个变量，以便更容易使用选择框的父 TR (thisTr)。然后，如果每个都是主 tr 的孩子，我们只需通过它自己的类指定每个，然后对它们做任何我们想做的事情。

于 2013-04-22T23:37:38.007 回答