Wählen Sie Tabellenzeile und fügen Sie in Form JavaScript

Question

Ich mache eine Seite, die eine Suchfunktion hat. Ich möchte in der Lage sein, die Ergebnisse in der Tabelle anzuklicken und die Informationen in ein Formular darunter einzufügen. Beispiel: Eine Seite für medizinische Aufzeichnungen, in der Sie nach Nachnamen suchen würden, würde die Tabelle mit den Kundeninformationen füllen, und Sie können auf eines der Ergebnisse in der Tabelle klicken, um alle Informationen in das Formular unterhalb der Tabelle einzugeben Tabelle.

Ich habe derzeit die Tabelle zieht die Ergebnisse und die Eingabe der Daten in das Formular aber Ich muss auf eine Schaltfläche klicken, bevor es mir erlaubt, etwas in der Tabelle auszuwählen. Ich möchte wirklich nicht auf den Knopf drücken müssen. Unten ist der Javascript-Code und PHP. Wenn Sie mehr brauchen, kann ich es zur Verfügung stellen.

Javascript: Ich denke, was erfordert die Schaltfläche gedrückt wird, ist die var row = td.parentNode Zeile, denn wenn es nur weggenommen wird, hört die Auswahlfunktion auf.

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; 

    populateFields(row); 
} 

PHP

echo '<input id="selectstyle" type="button" value="Select" onclick="test()"><br><table class="table-search" id="searchresulttable"><br>'; 
if(count($row)) { 
    $end_result = ''; 
    echo "<tr><td><u>Last Name</u></td><td><u>First Name</u></td><td><u>Phone #</u></td><td><u>Address</u></td><td><u>License</u></td><td><u>Tax Exempt</u></td><td><u>Tax ID</u></td></tr>"; 
    foreach($row as $r) { 
     $result = ucwords($r['bidlname']); 
     // we will use this to bold the search word in result 
     $bold = '<td>' . ucwords($r['bidlname']) . '</td>' . '<td>' . ucwords($r['bidfname']) . '</td><td>' . $r['bidphnum'] . '</td><td>' . $r['bidaddress'] . '</td><td>' . $r['bidlicense'] . '</td><td>' . $r['bidtaxexempt'] . '</td><td>' . $r['bidtaxid'] .'</td>';  
     $end_result .= '<tr>' . $bold . '</tr>';    
    } 
    echo $end_result; 
} else { 
    echo '<li>No results found</li>'; 
} 
echo '</table><br>'; 

Ich mag wäre in der Lage sein, nur um den Eintrag klicken i einfügen möchten, ohne zuerst auf die Schaltfläche klicken. Gedanken oder Ideen?

Answer 1

Wenn ich deine Frage richtig verstanden meine Antwort ist die folgende Ausschnitt:

var ishigh; 
 

 
function populateFields(row) { 
 

 
    // get the form elements 
 
    var frmElements = document.getElementById('frm'); 
 
    
 
    // for each cell in current row 
 
    for(var i=0; i< row.cells.length; i++) { 
 

 
    // copy the cell value to the input value 
 
    frmElements[i].value = row.cells[i].textContent; 
 
    } 
 
} 
 

 

 
// when document is ready 
 
window.addEventListener("DOMContentLoaded", function(event) { 
 

 
    // associate the click handler for the table 
 
    document.getElementById('searchresulttable').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; 
 

 
    // populate the form with the content of current row 
 
    populateFields(row); 
 
    } 
 
}); 
 

 
function test() { 
 
    // do nothing..... 
 
}

.highlighted { 
 
    background-color: #ffff99; 
 
}

<input id="selectstyle" type="button" value="Select" onclick="test()"><br> 
 
<table class="table-search" id="searchresulttable"><br> 
 
    <tr> 
 
     <td><u>Last Name</u></td> 
 
     <td><u>First Name</u></td> 
 
     <td><u>Phone #</u></td> 
 
     <td><u>Address</u></td> 
 
     <td><u>License</u></td> 
 
     <td><u>Tax Exempt</u></td> 
 
     <td><u>Tax ID</u></td> 
 
    </tr> 
 
    <tr> 
 
     <td>1bidlname</td> 
 
     <td>1bidfname</td> 
 
     <td>1bidphnum</td> 
 
     <td>1bidaddress</td> 
 
     <td>1bidlicense</td> 
 
     <td>1bidtaxexempt</td> 
 
     <td>1bidtaxid</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2bidlname</td> 
 
     <td>2bidfname</td> 
 
     <td>2bidphnum</td> 
 
     <td>2bidaddress</td> 
 
     <td>2bidlicense</td> 
 
     <td>2bidtaxexempt</td> 
 
     <td>2bidtaxid</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3bidlname</td> 
 
     <td>3bidfname</td> 
 
     <td>3bidphnum</td> 
 
     <td>3bidaddress</td> 
 
     <td>3bidlicense</td> 
 
     <td>3bidtaxexempt</td> 
 
     <td>3bidtaxid</td> 
 
    </tr> 
 
</table> 
 
<br> 
 
<form id="frm"> 
 
    Last Name:<br> 
 
    <input type="text" name="lastname"><br> 
 
    First Name:<br> 
 
    <input type="text" name="firstname"><br> 
 
    Phone #:<br> 
 
    <input type="text" name="phonenumber"><br> 
 
    Address:<br> 
 
    <input type="text" name="address"><br> 
 
    License:<br> 
 
    <input type="text" name="license"><br> 
 
    Tax Exempt:<br> 
 
    <input type="text" name="taxexempt"><br> 
 
    Tax Id:<br> 
 
    <input type="text" name="taxid"><br> 
 
</form>

Answer 2

ich nicht 50 rep haben noch so werde ich irgendwie muss meinen Ansatz hacken hier ...

Verwenden Sie regelmäßig js oder führen Sie eine Bibliothek wie jQuery oder unterstreichen?

Ist das speziell für die Touch-fähigen Geräte oder nicht (es ist okay, beides zu haben, aber diese Informationen helfen würden)

Meine Empfehlung ist, dass Sie jede JS-Bibliothek verwenden, die hier Batch-Klick Zuordnung tun.

Vielleicht fügen Sie eine Schaltfläche in die Zeile, um die Aktion auszulösen oder sogar anpassen Sie Ihre PHP, um Eigenschaften zu einem und in JS preventDefault für das Ereignis dann nehmen Sie die Daten von ihm.

so etwas wie ...

<a class="click_here_for_population" data-fisrt-name="FirstName" data-last-name="LastName" data-anything-else="foo">Add to form</a> 

dann ...

$('click_here_for_population').click(function(e){ 

    e.preventDefault(); 

    // do the population stuff from $(this) or pass $(this) to the function 
}) 

Auf diese Weise das Ereignisziel die Daten, die Sie ohne benötigen hält Eltern/Geschwister zu navigieren.