Question

我在jsp中有一个表单。它包含动态tr。 Tr可以是一个或多个。当只有一个tr时出现问题。如果多个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定义为未定义。

Answer 1

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

document.formName.check_all不会返回数组或nodeList。它只是input元素。所以不要在它上面使用数组索引。另一个问题是您没有名为"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>

Answer 2

document.formName.check_all只会在表单中有多个具有相同名称的元素时返回nodeList，否则它只返回input元素并使用它上面的数组表示法将返回undefined，当您尝试访问其属性时会导致语法错误。

如果您在同一表单中使用相同的输入名称不同的表，则可以使用getElementsByName DOM方法，该方法将始终返回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添加动态行，因此您可以使用单行和多行进行测试。

tr的第一个td中的复选框（只有一个）给出了undefined

2 个答案: