Question

我正在开发一个Javascript页面，用于处理HTML表格中的插入，删除，添加行。我正在编写edit_row（）函数，它将行中的值更改为表单，并通过Ajax通过save_row（）函数保存它们。在名为Platform的列中，只能有四个值 - 1,2,3和4.我决定使用下拉列表，因为它可以轻松验证输入，因此用户不会插入除1 2 3和4之外的值我已经尝试将HTML下载到innerHTML中，但它看起来很奇怪，我想知道是否还有其他方法可以在JavaScript中添加下拉列表？这是edit_row（）的代码：

function edit_row(id)
{
    var companyname=document.getElementById("name"+id).innerHTML;
    var destination=document.getElementById("destination"+id).innerHTML;
    var time=document.getElementById("time"+id).innerHTML;
    var platform=document.getElementById("destination"+id).innerHTML;
    var date=document.getElementById("date"+id).innerHTML;

    document.getElementById("name"+id).innerHTML="<input type='text' id='compname_text"+id+"' value='"+companyname+"'>";
    document.getElementById("destination"+id).innerHTML="<input type='text' id='age_text"+id+"' value='"+destination+"'>";
    document.getElementById("time"+id).innerHTML="<input type='time' id='time"+id+"' value='"+time+"'>";
    document.getElementById("platform"+id).innerHTML="<form id='platform"+id+"' value='"+platform+"'><select><option value = '12'> 1 </option ><option value = > 2</option></select>";
    document.getElementById("date"+id).innerHTML="<input type='date' id='date"+id+"' value='"+time+"'>";

    document.getElementById("edit_button"+id).style.display="none";
    document.getElementById("save_button"+id).style.display="block";

JS应该附带的HTML：

<html>
<head>
    <link href = "style.css" rel = "stylesheet" type = "text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Departures table for workers </title>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div class="table" align="center">
    <div style = "background-color:#FFFFFF; padding:20px;"><b>Departures Table for workers</b></div>
    <table border="1" align="center" width="700">
        <thead>
        <tr>

            <th>ID</th>
            <th>Train Company</th>
            <th>Destination</th>
            <th>Time</th>
            <th>Platform</th>
            <th>Date</th>
        </tr>
        </thead>
        <tbody>
        <?php while ($row = mysqli_fetch_assoc($result)): ?>
            <tr>
                <td><?php echo $row['id']?></td>
                <td id="name"><?php echo $row['Traincompany'] ?></td>
                <td id="destination"><?php echo $row['Destination']  ?></td>
                <td id="time"><?php echo $row['Time'] ?></td>
                <td id="platform"><?php echo $row['Platform'] ?></td>
                <td id="date"><?php echo $row['Date'] ?></td>
                <td>
                    <input type='button' class="edit_button" id="edit_button<?php echo $row['id'];?>" value="edit" onclick="edit_row('<?php echo $row['id'];?>');">
                    <input type='button' class="delete_button" id="delete_button<?php echo $row['id'];?>" value="delete" onclick="delete_row('<?php echo $row['id'];?>');">
                    <input type='button' class="save_button" id="save_button<?php echo $row['id'];?>" value="save" onclick="save_row('<?php echo $row['id'];?>');">
                </td>
            </tr>
        <?php endwhile ?>
        <tr id="new_row">
            <td>New ID will be given automatically</td>
            <td><input type="text" id="new_Traincompany" placeholder="Company name"></td>
            <td><input type="text" id="new_Destination" placeholder="Destination"></td>
            <td><input type="time" id="new_time"></td>
            <td align="center">
                    <select name = "Platform">
                      <option value = '1'> 1 </option >
                      <option value = '2'> 2</option >
                      <option value = '3'> 3</option >
                      <option value = '4'> 4 </option >
                    </select>
            </td>
            <td><input type="date" id="new_date" ></td>
            <td><input type="button" value="Insert Row" onclick="insert_row();"></td>
        </tr>
        </tbody>
    </table>
    <p class="message">Logout from user<a href="logout.php">Logout</a>
</div>
</body>
</html>

我知道我的代码可能非常原始，所以我希望看到有关如何改进它的建议或其他通过Javascript编辑行的方法。

Answer 1

首先，正如@NewToJS所提到的，只要您将这些内容分配给专用变量，就不必再次调用document.getElementById（）。innerHTML。所以代码可以这样简化：

function edit_row(id)
{
    var companyname=document.getElementById("name"+id).innerHTML;
    var destination=document.getElementById("destination"+id).innerHTML;

    companyname="<input type='text' id='compname_text"+id+"' value='"+companyname+"'>";
    destination="<input type='text' id='age_text"+id+"' value='"+destination+"'>";
   ...

然后，如果您不想将所有代码插入innerHTML，您可以编写一个专用函数来创建下拉列表并从主函数中调用它。

function insertDropdown (quantity) {
  var div = document.createElement('select');
  div.setAttribute("name", "platform");

  for (let i=0; i<quantity; i++) {
    var option = document.createElement('option');
    option.setAttribute("value", i)
    option.innerHTML = "option " + i
    div.appendChild(option)
  }
  document.getElementById('dropdown-container').appendChild(div)
}

确保为<td>分配了一个正确的ID，其中插入了下拉列表并从主函数中调用了该函数。

＆＃13;

function insertDropdown(quantity) {
  var div = document.createElement('select');
  div.setAttribute("name", "platform");

  for (let i=0; i<quantity; i++) {
    var option = document.createElement('option');
    option.setAttribute("value", i)
    option.innerHTML = "option " + i
    div.appendChild(option)
  }
  document.getElementById('dropdown-container').appendChild(div)
}

insertDropdown(3)

＆＃13;

<table>
  <tr>
    <td id="dropdown-container"></td>
  </tr>
</table>

＆＃13;

在getelementbyID中放入innerHTML的下拉列表

1 个答案: