根据表格中单击/滚动的行填充输入框答案

【问题标题】：Populate input boxes based on the clicked/scrolled row in table根据表格中单击/滚动的行填充输入框
【发布时间】：2013-08-02 15:18:52
【问题描述】：

我需要你的帮助。

在现有 javascript 专家的帮助下，我能够创建一个用户可以滑动到的表格（使用他们的向上和向下箭头键）以及允许用户单击一行来选择并突出显示它。

现在到了我想修改现有功能的时候了，这样，每当用户单击或使用箭头键导航到表中的选定行时，我都喜欢从行并使用它来填充下面的输入框列表。如何修改 javascript 编码以允许我这样做？

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mstrTable tr.normal td {
    color: #235A81;
    background-color: white;
}
#mstrTable tr.highlighted td {
    color: #FFFFFF;
    background-color: #235A81;
}
</style>
<script type='text/javascript'>
function test() {

var table = document.getElementById("mstrTable");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh;

tbody.onclick = function (e) {
  e = e || window.event;
  var td = e.target || e.srcElement
  var row = td.parentNode;
  if (ishigh&&ishigh!=row){
    ishigh.className='';
  }
  row.className = row.className==="highlighted" ? "" : "highlighted";
  ishigh=row;
}

document.onkeydown = function(e){
    e = e || event;
    var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
    if(code === 38){ //up arraow
        newhigh = rowindex(ishigh) - 2;
        if(!ishigh || newhigh < 0){return GoTo('mstrTable', rowslim);}
        return GoTo('mstrTable', newhigh);
    } else if (code === 40){ //down arrow
        newhigh = rowindex(ishigh);
        if(!ishigh || newhigh > rowslim){return GoTo('mstrTable', 0);}
        return GoTo('mstrTable', newhigh);
    }
}

function GoTo(id,nu){
  var obj=document.getElementById(id),
      trs=obj.getElementsByTagName('TR');
  nu = nu + 1;
  if (trs[nu]){
    if (ishigh&&ishigh!=trs[nu]){
      ishigh.className='';
    }
    trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
    ishigh=trs[nu];
   }
}

function rowindex(row){
    var rows = table.rows, i = rows.length;
    while(--i > -1){
        if(rows[i] === row){return i;}
    }
}

}//end of nested function

</script>


</head>
<body>
  <table id="mstrTable" cellspacing="1" border="1">
    <thead>
        <tr>
            <th>first name</th>
            <th>last name</th>
            <th>age</th>
            <th>total</th>
            <th>discount</th>
            <th>diff</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>peter</td>
            <td>parker</td>
            <td>28</td>
            <td>9.99</td>
            <td>20.3%</td>
            <td>+3</td>
        </tr>
        <tr>
            <td>john</td>
            <td>hood</td>
            <td>33</td>
            <td>19.99</td>
            <td>25.1%</td>
            <td>-7</td>
        </tr>
        <tr>
            <td>clark</td>
            <td>kent</td>
            <td>18</td>
            <td>15.89</td>
            <td>44.2%</td>
            <td>-15</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>almighty</td>
            <td>45</td>
            <td>153.19</td>
            <td>44%</td>
            <td>+19</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>evans</td>
            <td>56</td>
            <td>153.19</td>
            <td>23%</td>
            <td>+9</td>
        </tr>
    </tbody>
</table>
<br>
Firstname is:
<input type="text" id="firstname" />
<br>Lastname is:
<input type="text" id="lastname" />
<br>Age is:
<input type="text" id="age" />
<br>Total is:
<input type="text" id="total" />
<br>Discount is:
<input type="text" id="discount" />
<br>Diff is:
<input type="text" id="diff" />

<br>
<input type="button" value="testme" onclick="test()">
</body>


</html>

【问题讨论】：

标签： javascript dom html-table

【解决方案1】：

您可以编写另一个函数来填充必要的字段。示例：

function populateFields(row) {
    el('firstname').value = row.cells[0].innerHTML;
    el('lastname').value = row.cells[1].innerHTML;
    el('age').value = row.cells[2].innerHTML;
    el('total').value = row.cells[3].innerHTML;
    el('discount').value = row.cells[4].innerHTML;
    el('diff').value = row.cells[5].innerHTML;
}
// el() is shortcut for document.getElementById

您将相应的行传递给函数以从中获取数据。

http://jsfiddle.net/dfsq/HDu8n/

【讨论】：

工作就像一个魅力。非常感谢。我希望完全熟悉 javascript 和 DOM。我的大部分 js 都是自学的。我还有很长的路要走。