2

jspにフォームがあります。動的な tr が含まれています。Tr は 1 つまたは複数にすることができます。tr が 1 つしかない場合に問題が発生します。複数の tr の場合、すべての入力要素も同じ名前になります。

function getRowIndex( el ) {
            while( (el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr' );
            if( el ) 
            return el.rowIndex - 1;
      }

function enableDisableRow(rowIndex){
           if(document.formName.check_all[rowIndex].checked == true){
                 document.formName.text_all[rowIndex].disabled = false;
           }
}


<table>
   <tr>
      <td>
          <input type="checkbox" name="check_all"       onclick="enableDisableRow(getRowIndex(this))" />
      </td>
          <input type="text" name="text_all" value="Hello" />
      </td>
   </tr>
</table>

問題はdocument.formName.check_all.checked、行が1つしかない場合に未定義になることです。

4

2 に答える 2

0

document.formName.check_allnodeListは、フォームに同じ名前の要素が複数ある場合にのみ a を返します。それ以外の場合は単にinput要素を返し、配列表記を使用すると が返さundefinedれ、そのプロパティにアクセスしようとすると構文エラーが発生します。

同じ入力名を持つ同じフォーム内に別のテーブルがない場合は、getElementsByNameDOM メソッドを使用できます。このメソッドは常に を返すnodeListか、古いブラウザでは互換性のある配列のような構造を返します。

function getRowIndex(el) {
    while ((el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr');
    if (el) return el.rowIndex; //NOTE: I've also removed the -1 here
}
function enableDisableRow(rowIndex) {
    var checkboxes = document.getElementsByName('check_all'),
        textboxes = document.getElementsByName('text_all');

    if (checkboxes[rowIndex].checked) {
        textboxes[rowIndex].disabled = false;
    }
}

Fiddle - 動的行を追加するためだけに jQuery を使用していることに注意してください。そのため、単一行と複数行の両方でテストできます。

于 2012-11-02T16:20:40.847 に答える
0 
if (document.formName.check_all[rowIndex].checked == true) {
    document.formName.text_all[rowIndex].disabled = false;
}

document.formName.check_all配列または . を返しませんnodeList。それは単にinput要素です。したがって、配列インデックスを使用しないでください。もう1つの問題は、という名前の要素またはフォームがないことです"formName"。代わりにこれを試してください：

function getRowIndex(el) {
    while ((el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr');
    if (el) return el.rowIndex - 1;
}

function enableDisableRow(rowIndex) {
    if (document.formName.check_all.checked == true) {
        document.formName.text_all.disabled = false;
    }
}

そしてHTML：

<form name="formName">
    <table name="">
       <tr>
          <td>
              <input type="checkbox" name="check_all" onclick="enableDisableRow(getRowIndex(this))" />
          </td>
           <td>
              <input type="text" name="text_all" value="Hello" />
          </td>
       </tr>
    </table>
</form>​​​​​​​​​​​​
于 2012-11-02T15:58:08.667 に答える