0

「Abhishek Jain」、「rps」、「adeneo」にコードをありがとう。これは私がそれを解決するのに役立ちます。

以下のコードに問題があります：

HTML

<table cellpadding="0" cellspacing="0" width="100%" class="table" id="addtable" border="1">
<thead>
  <tr>
    <th width="4%"><b>Date</b></th>
    <th width="4%"><b>Cut Number</b></th>
    <th width="4%"><b>Content</b></th>
    <th width="4%"><b>Others</b></th>
    <th width="5%"><b>Customer name</b></th>
    <th width="4%"><b>Customer code</b></th>
    <th width="5%"><b>Address</b></th>
    <th width="5%"><b>Owe amount</b></th>
    <th width="4%"><b>Executive</b></th>
    <th width="6%"><b>Obtain Amount</b></th>
    <th width="9%"><b>Obtain Room</b></th>
  </tr>
</thead>
<tbody>
  <tr id="addrow">
    <td><input name="date[]" id="mask_dm1" type="text" size="1" value=""></td>
    <td><input name="cutno[]" type="text" size="6" ></td>
    <td>
        <select name="cutcontent[]" id="selector">
            <option value="0">Please select</option>
            <option value="1">Value 1</option>
            <option value="2">Value 2</option>
            <option value="3">Value 3</option>
            <option value="other">Other</option>
        </select>
    </td>
    <td><input name="cutother[]" type="text" size="4"  id="cutother" disabled /></td>
    <td><input name="cusname[]" type="text" size="4" ></td>
    <td><input name="cuscode[]" type="text" size="2" ></td>
    <td><input name="cusaddress[]" type="text" size="4" ></td>
    <td><input name="owe[]" type="text" size="2"  id="cutowe" disabled /></td>
    <td><input name="executive[]" type="text" size="1"  /></td>
    <td><input name="obtainamount[]" type="text" size="2"  id="obtainamount" disabled /></td>
    <td><input name="obtainroom[]" type="text" size="2"  id="obtainroom" disabled /></td>
  </tr>
</tbody>

Javascript:

$(document).ready(function () {
    var clonedRow = '   <td><input name="date[]" id="mask_dm1" type="text" size="1" value=""></td>';
    clonedRow += '      <td><input name="cutno[]" type="text" size="6" ></td>';
    clonedRow += '      <td>';
    clonedRow += '          <select name="cutcontent[]" id="selector">';
    clonedRow += '              <option value="0">Please select</option>';
    clonedRow += '              <option value="1">Value 1</option>';
    clonedRow += '              <option value="2">Value 2</option>';
    clonedRow += '              <option value="3">Value 3</option>';
    clonedRow += '              <option value="other">Other</option>';
    clonedRow += '          </select>';
    clonedRow += '      </td>';
    clonedRow += '      <td><input name="cutother[]" type="text" size="4"  id="cutother" disabled /></td>';
    clonedRow += '      <td><input name="cusname[]" type="text" size="4" ></td>';
    clonedRow += '      <td><input name="cuscode[]" type="text" size="2" ></td>';
    clonedRow += '      <td><input name="cusaddress[]" type="text" size="4" ></td>';
    clonedRow += '      <td><input name="owe[]" type="text" size="2"  id="cutowe" disabled /></td>';
    clonedRow += '      <td><input name="executive[]" type="text" size="1"  /></td>';
    clonedRow += '      <td><input name="obtainamount[]" type="text" size="2"  id="obtainamount" disabled /></td>';
    clonedRow += '      <td><input name="obtainroom[]" type="text" size="2"  id="obtainroom" disabled /></td>';
    var appendRow = '<tr id="addrow">' + clonedRow + '</tr>';
    $('#btnAddMore').click(function () {
        $('#addtable tr:last').after(appendRow);
        $('select#selector').change(function () {
            var theVal = $(this).val();
            switch (theVal) {
                case '1':
                    $('input#cutowe').removeAttr('disabled');
                    $('input#obtainamount').removeAttr('disabled');
                    $('input#obtainroom').removeAttr('disabled');
                    break;
                case '2':
                    $('input#cutother').removeAttr('disabled');
                    break;
                default:
                    $('input#cutowe').attr('disabled', 'disabled');
                    $('input#obtainamount').attr('disabled', 'disabled');
                    $('input#obtainroom').attr('disabled', 'disabled');
                    $('input#cutother').attr('disabled', 'disabled');
                    break;
            }
        });
    });

    $('select#selector').change(function () {
        var theVal = $(this).val();
        switch (theVal) {
            case '1':
                $('input#cutowe').removeAttr('disabled');
                $('input#obtainamount').removeAttr('disabled');
                $('input#obtainroom').removeAttr('disabled');
                break;
            case '2':
                $('input#cutother').removeAttr('disabled');
                break;
            default:
                $('input#cutowe').attr('disabled', 'disabled');
                $('input#obtainamount').attr('disabled', 'disabled');
                $('input#obtainroom').attr('disabled', 'disabled');
                $('input#cutother').attr('disabled', 'disabled');
                break;
        }
    });
});

「行を追加」ボタンを押すと、行＃2の「コンテンツ」という名前のセレクターがすべての入力に影響します。それを解決する方法は？例を参照http://jsfiddle.net/N2jyy/6/

4

3 に答える 3

1

idに変更後class

$(document).ready(function () {

$('#btnAddMore').click(function () {
    $('#addtable tr:last').after($('#addtable tr:last').clone(true));


    $('select.selector').change(function () {
        var theVal = $(this).val();
        switch (theVal) {
            case '1':
               $(this).parents('tr').find('input.cutowe,input.obtainamount,nput.obtainroom').removeAttr('disabled');
                break;
            case '2':
                $(this).parents('tr').find('input.cutowe,input.obtainamount,input.obtainroom,input.cutother').attr('disabled', 'disabled');
                break;
        }
    });
 });


});

上記のコードはさらに減らすことができますが、同じ ID を持つことは悪い考えであり、現在の列から他の列にアクセスする方法など、いくつかのことを知ることから始める必要があります。

http://jsfiddle.net/N2jyy/9/

于 2013-09-10T10:52:51.390 に答える