单击输入框 table return 单元格值与输入框在同一行但不同列

Question

我一直在尝试这样做：当用户单击 table 中的输入框之一输入他们的用户名时，Javascript 将 return 单元格的值在变量的下一列（作业 ID）中，因此我可以使用该变量，它是 mysql table 中的主键，用他们输入的用户名更新数据库。

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

我需要编辑此 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>

下面是tableHTML

    <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;
}

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

单击输入框 table return 单元格值与输入框在同一行但不同列

On click of input box in table return cell value on the same row as input box but different column

javascript

html-table

input

onclick