Question

我正在尝试获取表中input / textbox的值。其余代码可以工作，但是我似乎无法从表单元格中的输入获取值。

我曾经尝试使用value，但是我不确定。

这是我使用innerHTML时得到的： <input name="ctl00$cphMain$gridFTA$ctl02$iTxtNumberOfCourses" type="text" value="1" id="cphMain_gridFTA_iTxtNumberOfCourses_0" onblur="getTotal()">

我希望获得每个NumberOfCourses输入文本框的值。

function getTotal() {
  var amt;
  var subTotal = 0;
  var FTA = document.getElementById("cphMain_gridFTA");

  for (i = 1; i < FTA.rows.length; i++) {

    amt = FTA.rows[i].cells[1].value;
    alert(amt);
    if (isNaN(amt)) {
      subTotal += 0;
    } else {
      subTotal += parseFloat(amt);
    }
  }
}

<table cellspacing="0" rules="all" border="1" id="cphMain_gridFTA" style="border-collapse:collapse;">
  <tr>
    <th scope="col">Faculty Name</th>
    <th scope="col">Number Of Courses</th>
    <th scope="col">Courses (Add Comma-separated Courses)</th>
    <th scope="col">Notes</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>
      <span id="cphMain_gridFTA_txtFacultyName_0">Josh</span>
    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl02$iTxtNumberOfCourses" type="text" value="1" id="cphMain_gridFTA_iTxtNumberOfCourses_0" onblur="getTotal()" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl02$iTxtCourses" type="text" value="200" id="cphMain_gridFTA_iTxtCourses_0" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl02$iTxtNotes" type="text" value="something                                                                                                                                                                                               "
        id="cphMain_gridFTA_iTxtNotes_0" style="width:400px;" />
    </td>
    <td style="width:220px;">
      <a id="cphMain_gridFTA_ButtonEdit_0" href="javascript:__doPostBack(&#39;ctl00$cphMain$gridFTA$ctl02$ButtonEdit&#39;,&#39;&#39;)">Edit</a>
    </td>
  </tr>
  <tr>
    <td>
      <span id="cphMain_gridFTA_txtFacultyName_1">Mary</span>
    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl03$iTxtNumberOfCourses" type="text" value="2" id="cphMain_gridFTA_iTxtNumberOfCourses_1" onblur="getTotal()" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl03$iTxtCourses" type="text" value="300, 500" id="cphMain_gridFTA_iTxtCourses_1" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl03$iTxtNotes" type="text" value="test                                                                                                                                                                                                    "
        id="cphMain_gridFTA_iTxtNotes_1" style="width:400px;" />
    </td>
    <td style="width:220px;">
      <a id="cphMain_gridFTA_ButtonEdit_1" href="javascript:__doPostBack(&#39;ctl00$cphMain$gridFTA$ctl03$ButtonEdit&#39;,&#39;&#39;)">Edit</a>
    </td>
  </tr>
</table>

Answer 1

尝试一下

您需要按名称处理该字段-由于您的后端会添加各种内容，因此我们可以将$ =选择器用于“结尾为”
您需要使用一个选择器来选择字段而不是单元格

您可能已经使用

amt = FTA.rows[i].cells[1].querySelector("input").value;

但这更优雅

function getTotal() {
  var amt;
  var subTotal = 0;

  document.getElementById("cphMain_gridFTA")         // the table
    .querySelectorAll("[name$=iTxtNumberOfCourses]") // the inputs as array using $= name ending on 
    .forEach(el => subTotal += +el.value);           // sum 
    alert(subTotal);
}

<table cellspacing="0" rules="all" border="1" id="cphMain_gridFTA" style="border-collapse:collapse;">
  <tr>
    <th scope="col">Faculty Name</th>
    <th scope="col">Number Of Courses</th>
    <th scope="col">Courses (Add Comma-separated Courses)</th>
    <th scope="col">Notes</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>
      <span id="cphMain_gridFTA_txtFacultyName_0">Josh</span>
    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl02$iTxtNumberOfCourses" type="text" value="1" id="cphMain_gridFTA_iTxtNumberOfCourses_0" onblur="getTotal()" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl02$iTxtCourses" type="text" value="200" id="cphMain_gridFTA_iTxtCourses_0" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl02$iTxtNotes" type="text" value="something                                                                                                                                                                                               "
        id="cphMain_gridFTA_iTxtNotes_0" style="width:400px;" />
    </td>
    <td style="width:220px;">
      <a id="cphMain_gridFTA_ButtonEdit_0" href="javascript:__doPostBack(&#39;ctl00$cphMain$gridFTA$ctl02$ButtonEdit&#39;,&#39;&#39;)">Edit</a>
    </td>
  </tr>
  <tr>
    <td>
      <span id="cphMain_gridFTA_txtFacultyName_1">Mary</span>
    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl03$iTxtNumberOfCourses" type="text" value="2" id="cphMain_gridFTA_iTxtNumberOfCourses_1" onblur="getTotal()" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl03$iTxtCourses" type="text" value="300, 500" id="cphMain_gridFTA_iTxtCourses_1" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl03$iTxtNotes" type="text" value="test                                                                                                                                                                                                    "
        id="cphMain_gridFTA_iTxtNotes_1" style="width:400px;" />
    </td>
    <td style="width:220px;">
      <a id="cphMain_gridFTA_ButtonEdit_1" href="javascript:__doPostBack(&#39;ctl00$cphMain$gridFTA$ctl03$ButtonEdit&#39;,&#39;&#39;)">Edit</a>
    </td>
  </tr>
</table>

要获取值数组，请使用

  // array of values
  var FTA = [...document.getElementById("cphMain_gridFTA") // the table
    .querySelectorAll("[name$=iTxtNumberOfCourses]")]      // the inputs as array using $= name ending on 
    .map(el => +el.value);                                 // map
    console.log(FTA); // this array can be further reduced to a total

Answer 2

问题是您试图通过读取<input>的{{1}}来访问value的值。这是不正确的。您需要从<td>获取<input>元素并获取其值。

您可以使用<td>找到querySelector并从此处拉出<input>。

value

Answer 3

当心：您的单元格包含一个html元素，这是其中的输入。因此，您不能简单地访问值，而是需要获取输入然后获取值。

function getTotal() {
  var amt;
  var subTotal = 0;
  var FTA = document.getElementById("cphMain_gridFTA");

  for (i = 1; i < FTA.rows.length; i++) {
    var input = FTA.rows[i].cells[1].getElementsByTagName('input')[0]
    amt = input.value;
    
    if (isNaN(amt)) {
      subTotal += 0;
    } else {
      subTotal += parseFloat(amt);
    }
  }
  
  return subTotal;
}

<table cellspacing="0" rules="all" border="1" id="cphMain_gridFTA" style="border-collapse:collapse;">
  <tr>
    <th scope="col">Faculty Name</th>
    <th scope="col">Number Of Courses</th>
    <th scope="col">Courses (Add Comma-separated Courses)</th>
    <th scope="col">Notes</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>
      <span id="cphMain_gridFTA_txtFacultyName_0">Josh</span>
    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl02$iTxtNumberOfCourses" type="text" value="1" id="cphMain_gridFTA_iTxtNumberOfCourses_0" onblur="getTotal()" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl02$iTxtCourses" type="text" value="200" id="cphMain_gridFTA_iTxtCourses_0" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl02$iTxtNotes" type="text" value="something                                                                                                                                                                                               "
        id="cphMain_gridFTA_iTxtNotes_0" style="width:400px;" />
    </td>
    <td style="width:220px;">
      <a id="cphMain_gridFTA_ButtonEdit_0" href="javascript:__doPostBack(&#39;ctl00$cphMain$gridFTA$ctl02$ButtonEdit&#39;,&#39;&#39;)">Edit</a>
    </td>
  </tr>
  <tr>
    <td>
      <span id="cphMain_gridFTA_txtFacultyName_1">Mary</span>
    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl03$iTxtNumberOfCourses" type="text" value="2" id="cphMain_gridFTA_iTxtNumberOfCourses_1" onblur="getTotal()" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl03$iTxtCourses" type="text" value="300, 500" id="cphMain_gridFTA_iTxtCourses_1" />

    </td>
    <td>
      <input name="ctl00$cphMain$gridFTA$ctl03$iTxtNotes" type="text" value="test                                                                                                                                                                                                    "
        id="cphMain_gridFTA_iTxtNotes_1" style="width:400px;" />
    </td>
    <td style="width:220px;">
      <a id="cphMain_gridFTA_ButtonEdit_1" href="javascript:__doPostBack(&#39;ctl00$cphMain$gridFTA$ctl03$ButtonEdit&#39;,&#39;&#39;)">Edit</a>
    </td>
  </tr>
</table>

<button onclick="alert(getTotal())">Total</button>

InnerHTML返回Input / Textbox而不是值？

3 个答案: