Uzyskaj wartości pola (td), klikając wiersz tabeli

Potrzebuję Twojej pomocy.Uzyskaj wartości pola (td), klikając wiersz tabeli

Mam poniższą tabelę, jak opisano poniżej. Chciałbym kliknąć jeden z wierszy tabeli (z wyłączeniem nagłówków) i uzyskać wartości kolumn z wybranego wiersza.

Jak wypełnić pola tekstowe informacjami z wybranego wiersza w tabeli?

Brak bibliotek.

<!DOCTYPE html> 

<html> 

<head> 

</head> 

<body> 


<table id="myTable" cellspacing="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> 

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" /> 
</body> 

</html>

Źródło

2013-07-31 John Smith

proszę pisać kod pokazujący, czego próbowaliśmy – bozdoz

@Avitus "Brak bibliotek proszę" – Optox

Podana odpowiedź nie korzysta z biblioteki – Avitus

Oto jeden z przykładów, jak używać event delegation w javascript (jest to szczególnie wygodne dla dynamicznie zawartości dodatku). Procedura obsługi zdarzenia jest dołączony do atrybutu onclick Tabela elementu:

function run(){ 
    document.getElementById('myTable').onclick = function(event){ 
     event = event || window.event; //for IE8 backward compatibility 
     var target = event.target || event.srcElement; //for IE8 backward compatibility 
     while (target && target.nodeName != 'TR') { 
      target = target.parentElement; 
     } 
     var cells = target.cells; //cells collection 
     //var cells = target.getElementsByTagName('td'); //alternative 
     if (!cells.length || target.parentNode.nodeName == 'THEAD') { // if clicked row is within thead 
      return; 
     } 
     var f1 = document.getElementById('firstname'); 
     var f2 = document.getElementById('lastname'); 
     var f3 = document.getElementById('age'); 
     var f4 = document.getElementById('total'); 
     var f5 = document.getElementById('discount'); 
     var f6 = document.getElementById('diff'); 
     f1.value = cells[0].innerHTML; 
     f2.value = cells[1].innerHTML; 
     f3.value = cells[2].innerHTML; 
     f4.value = cells[3].innerHTML; 
     f5.value = cells[4].innerHTML; 
     f6.value = cells[5].innerHTML; 
    } 
}

JSFIDDLE: code/result page

Alternatywne rozwiązanie, w którym procedura obsługi zdarzenia jest bezpośrednio przyłączony do każdego elementu TR może wyglądać następująco:

function run() { 
    var t = document.getElementById('myTable'); 
    var rows = t.rows; //rows collection - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement 
    for (var i=0; i<rows.length; i++) { 
     rows[i].onclick = function() { 
      if (this.parentNode.nodeName == 'THEAD') { 
       return; 
      } 
      var cells = this.cells; //cells collection 
      var f1 = document.getElementById('firstname'); 
      var f2 = document.getElementById('lastname'); 
      var f3 = document.getElementById('age'); 
      var f4 = document.getElementById('total'); 
      var f5 = document.getElementById('discount'); 
      var f6 = document.getElementById('diff'); 
      f1.value = cells[0].innerHTML; 
      f2.value = cells[1].innerHTML; 
      f3.value = cells[2].innerHTML; 
      f4.value = cells[3].innerHTML; 
      f5.value = cells[4].innerHTML; 
      f6.value = cells[5].innerHTML; 
     }; 
    } 
}

JSFIDDLE: code/result page

Źródło

2013-07-31 20:29:46 Stano

Przy użyciu tylko zwykły javascript można to zrobić:

<html> 

<head> 

<script language="javascript" type="text/javascript"> 
function showRow(row) 
{ 
var x=row.cells; 
document.getElementById("firstname").value = x[0].innerHTML; 
document.getElementById("lastname").value = x[1].innerHTML; 
document.getElementById("age").value = x[2].innerHTML; 
document.getElementById("total").value = x[3].innerHTML; 
document.getElementById("discount").value = x[4].innerHTML; 
document.getElementById("diff").value = x[5].innerHTML; 
} 
</script> 
</head> 
<body> 
<table id="myTable" cellspacing="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 onclick="javascript:showRow(this);"> 
      <td>peter</td> 
      <td>parker</td> 
      <td>28</td> 
      <td>9.99</td> 
      <td>20.3%</td> 
      <td>+3</td> 
     </tr> 
     <tr onclick="javascript:showRow(this);"> 
      <td>john</td> 
      <td>hood</td> 
      <td>33</td> 
      <td>19.99</td> 
      <td>25.1%</td> 
      <td>-7</td> 
     </tr> 
     <tr onclick="javascript:showRow(this);"> 
      <td>clark</td> 
      <td>kent</td> 
      <td>18</td> 
      <td>15.89</td> 
      <td>44.2%</td> 
      <td>-15</td> 
     </tr> 
     <tr onclick="javascript:showRow(this);"> 
      <td>bruce</td> 
      <td>almighty</td> 
      <td>45</td> 
      <td>153.19</td> 
      <td>44%</td> 
      <td>+19</td> 
     </tr> 
     <tr onclick="javascript:showRow(this);"> 
      <td>bruce</td> 
      <td>evans</td> 
      <td>56</td> 
      <td>153.19</td> 
      <td>23%</td> 
      <td>+9</td> 
     </tr> 
    </tbody> 
</table> 

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" /> 


</body> 
</html>

Źródło

2013-07-31 20:20:00 Avitus

Umieść onclick na każdym z TRS tak:

onclick="fillme(this)"

a następnie umieścić ten skrypt w główka

<script> 
function fillme(o){ 
    var inputs=document.getElementsByTagName('input'); 
    var tds=o.getElementsByTagName('td'); 

    for(a in tds){ 
     inputs[a].value=tds[a].innerHTML; 
    } 
} 
</script>

Źródło

2013-07-31 20:24:25

Działa to tylko wtedy, gdy dane wejściowe są w tej samej kolejności, co TD. Jeśli są w innej kolejności, Twoje dane będą wyświetlane nieprawidłowo. – Avitus

Witaj Adam, spróbuj zaktualizować 'for (a in cells)' with: 'for (var a in cells) {if (! Cells.hasOwnProperty (a)) {continue; } input [a] .value = tds [a] .innerHTML; } ', aby przypisać tylko indeksy liczb. Poza tym rozwiązanie jest w porządku. – Stano

@Stano, punkt dobry i uzgodniony –

Spróbuj tego (patrz the fiddle):

var table = document.getElementById('myTable'), 
    inputHash = { 
     '0': 'firstname', 
     '1': 'lastname', 
     '2': 'age', 
     '3': 'total', 
     '4': 'discount', 
     '5': 'diff' 
    }; 

for (var i in inputHash) 
    inputHash[ i ] = document.getElementById(inputHash[ i ]); 

table.addEventListener('click', function(evt) { 
    var target = evt.target; 

    if (target.nodeName != 'TD') 
     return; 

    var columns = target.parentNode.getElementsByTagName('td'); 

    for (var i = columns.length; i-- ;) 
     inputHash[ i ].value = columns[ i ].innerHTML; 
});

Źródło

2013-07-31 20:26:24 oleq

To nie zadziała, jeśli używasz starszej przeglądarki, ponieważ starsze przeglądarki nie obsługują "addEventListener". Dlatego w jQuery robią coś innego. Proszę przeczytać: http://stackoverflow.com/questions/4810766/how-does-jquerys-click-work-behind-the-scenes – Avitus

dlaczego kliknięty element nie został załadowany do pola tekstowego http://jsfiddle.net/rrzZU/703 / –

Uzyskaj wartości pola (td), klikając wiersz tabeli

Odpowiedz

Powiązane problemy