单击表格中的输入框返回与输入框相同行但不同列的单元格值

Question

我一直在尝试这样做：当用户单击表中的一个输入框输入他们的用户名时，Javascript 会将下一列（作业 ID）中的单元格值返回给一个变量，所以然后我可以使用作为 mysql 表中主键的变量来使用他们输入的用户名更新数据库。

我找到了一些将输入框的索引输出到警报的代码。

我需要帮助编辑此 Javascript，以便它在用户单击的输入框旁边找到列（作业 ID）的值。

    <script>var list = document.getElementById("job_table"),
    items = list.getElementsByTagName("input");

 list.onclick = function(e) {
    var evt = e || window.event,
    src = evt.target || evt.srcElement;
    var myIndex = findIndex(src);    
        alert(myIndex);
};

function findIndex( elem ) {
     var i, len = items.length;
     for(i=0; i<len; i++) {
         if (items[i]===elem) {
            return i;
         }
     }


       return -1;
 }</script>

下面是表格 HTML

    <p id="demo"></p>

    <table id="job_table">
  <thead>
    <tr>
      <th>Enter Username Then Press Log On Button</th>
      <th>Job Id</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <form action="" method="post">
          <input  type="text" ">
          <button type="submit">Log off</button>                                    
          <button type="submit">Log on</button>
        </form>
      </td>
      <td>67</td>
    </tr>
    <tr>
      <td>
        <form action="" method="post">
          <input type="text">
          <button type="submit">Log off</button>                        
          <button type="submit">Log on</button>
        </form>
      </td>
      <td>68</td>
    </tr>
  </tbody>
 </table>

JSFIDDLE

经过一整天的搜索，我找到了我想要的东西，JSFIDDLE JQUERY ANSWER

Answer 1

我扩展了您的 list.onclick 处理程序脚本，以通过单击输入字段来获取当前行的作业 ID：

list.onclick = function(e) {
    var evt = e || window.event,
    src = evt.target || evt.srcElement;

    if (src.tagName != 'INPUT')
        return; 

    //var myIndex = findIndex(src);    

    // fetching TR parent row of clicked input.
    var parentRow = src.parentNode;
    do {
        parentRow = parentRow.parentNode;
    }
    while(parentRow.tagName != 'TR');

    var jobIdTd = parentRow.getElementsByTagName('TD')[1] // 1 is index of job id in this row;

    document.getElementById("demo").innerHTML = jobIdTd.innerHTML;
}

您的点击处理程序用于整个表格，因此有必要知道哪个表格行包含您的输入字段。使用do/while loop，您可以在元素层次结构中向上获取行。之后，您获取该行的所有元素，包括 td 元素。输入元素的索引并不是真正需要的。