選擇表行並將其插入表單Javascript

Question

我正在制作一個具有搜索功能的頁面。 我希望能夠單擊表中的結果，然后將其插入下面的表格中。 例如：一個用於病歷的頁面，您將在其中搜索姓氏，它將用客戶信息填充表格，然后您可以點擊表格中的結果之一，將其全部信息填寫到表格下方的表格中表。

我目前有表格來提取結果並將數據輸入表格， 但是我必須先單擊一個按鈕，然后才能選擇表格中的任何內容。 我真的不想要按下按鈕。 下面是Javascript代碼和php。 如果您需要更多，我可以提供。

Javascript：我認為需要按下按鈕的地方是var row = td.parentNode行，因為剛取走它時，選擇功能就會停止。

 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>';

我希望能夠僅單擊要插入的條目，而不必先單擊該按鈕。 有想法或想法嗎？

Answer 1

如果我正確理解了您的問題，那么我的答案是以下代碼段：

 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

我還沒有50名代表，所以我不得不在這里破解我的方法...

您正在使用常規js，還是正在運行jQuery或下划線之類的庫？

這是否專門針對啟用觸摸的設備（可以同時使用這兩個設備，但此信息會有所幫助）

我的建議是您使用任何可以在此處進行批量點擊分配的JS庫。

也許在該行上添加一個按鈕來觸發操作，甚至調整您的PHP以將屬性添加到，並在JS preventDefault事件中添加事件，然后從該事件中獲取數據。

就像是...

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

然后...

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

    e.preventDefault();

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

這樣，事件目標無需導航父母/兄弟姐妹即可保存您需要的數據。