1

I have a table with rows and input/select form elements. At the bottom row i have a button to add a new row to the Table. Initially the table is empty with just one row with a button
Like this:

<form name="test" id="test" action="#" >
<table id="matrix">
  <tr id="1">
    <td><select class="parent" name="parent">
            <option value="C" label="C">C</option>
            <option selected="selected" value="P" label="P">P</option>
            <option value="B" label="B">B</option>           
        </select></td>        
    <td><div  id="my_data_1">
            <span title="parent_val"></span>
        </div></td>
    <td>&nbsp;</td>
  </tr>
  <tr >
    <td colspan="3"><input type="button" class="add_new" /></td>
  </tr>
</table>
</form>

Now when i click on the button with the add_new class i clone the first row, increment its id and then insert it above the last row.

The issue is that i have an onchange event attached to the select with class parent as

$('#matrix').on('change', 'select.parent_type', function() {
    var RowID = $(this).closest('tr').attr('id');   
    var attributes_div = $('#matrix tr#'+RowID).find('div#my_data'+RowID );
    new_id = GetParentIDFormat(attributes_div, 3);
    $(attributes_div +"span[title='parent_val']").html(new_id);

});

When i added two or more rows, the change function changes the Value for SPAN "parent_val" for ALL the rows rather than the specific row whose SELECT parent was changed.

4

2 に答える 2

1

関数がなければ、いくつかのエラーがありましGetParentIDFormatた。100% の解決策を提供することはできませんが、次のようになります。

'select.parent_type'する必要があります'select.parent'

$('#matrix tr#'+RowID).find('div#my_data');する必要があります
$('#' + RowID).find('.my_data');。
複数の同等の ID を持つことはできないため、クラスが必要であることに注意してください。

$(attributes_div +"span[title='parent_val']")
する必要があります
$("span[title='parent_val']", attributes_div)

その結果：

$('#matrix').on('change', 'select.parent', function() {
    var RowID = $(this).closest('tr').attr('id'); 
    var attributes_div = $('#' + RowID).find('.my_data');
    var new_id = GetParentIDFormat(attributes_div, 3);
    $("span[title='parent_val']", attributes_div).html(new_id);
});
于 2013-11-06T14:02:50.173 に答える
0

変数はattributes_divjQuery オブジェクトを指しているため、それを文字列と連結して、必要な要素を選択するセレクターを取得することはできません。代わりにこれを行うだけです：

attributes_div.find('span[title="parent_val"]').html(new_id);

これは、によって参照される<span title="parent_val">特定の内部の要素を探すため、必要な単一の要素である必要があります。<div>attributes_div

my_dataただし、その行を複製する場合は、すべての要素でID を使用できないことに注意してください。<div>要素は一意であるはずです。代わりにクラスへの変更を検討してください。

于 2013-11-06T13:54:53.780 に答える