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个元素。输入元素的索引对此来说并不是必需的。

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

1 个答案: