根據表中點擊/滾動的行填充輸入框

在現有的javascript專家的幫助下，我能夠創建一個表格，用戶可以在其中滑動（使用其上下箭頭鍵），並允許用戶單擊一行以選擇並突出顯示它。

現在來我要修改我現有的功能，以便每當用戶點擊或使用其箭頭鍵導航到表中選定的行，id喜歡從信息（數據）該行並使用它填充下面的輸入框列表。如何修改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>

來源

2013-08-01 John Smith

您可以編寫另一個函數來填充必要的字段。示例：

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/

來源

2013-08-01 16:05:05 dfsq

工作就像一個魅力。非常感謝。我希望完全熟悉JavaScript和DOM。我的大部分js都是自學的。我有很長的路要走。 –

根據表中點擊/滾動的行填充輸入框

回答

相關問題