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
})

这样，事件目标可以保存您需要的数据，而无需导航父母/兄弟姐妹。

选择表行并插入表单Javascript

2 个答案: