更改动态表中的输入格式：下拉列表、数字、日期答案

【问题标题】：Change input format in dynamic table: dropdown, number, date更改动态表中的输入格式：下拉列表、数字、日期
【发布时间】：2022-01-04 00:09:59
【问题描述】：

我正在处理具有 3 种输入文本类型的动态 3 列表：产品、数量和日期

这很好，但我想更改类型格式：

产品栏=>下拉类型
数量栏=>数字类型
日期列 => 日期类型 (dd-mm-yyyy)

我该如何改变它？

谢谢

原文来源：link

在线代码：https://jsfiddle.net/bvotcode/r61ptxe9/7/

HTML

<body>
 <div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Date</th>
</tr>

<tr id="row1">
<td id="product_row1">Car</td>
<td id="quantity_row1">10</td>
<td id="date_row1">20/12/2021</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>

<tr id="row2">
<td id="product_row2">Book</td>
<td id="quantity_row2">22</td>
<td id="date_row2">26</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>

<tr id="row3">
<td id="product_row3">Laptop</td>
<td id="quantity_row3">44</td>
<td id="date_row3">19/01/2022</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>

<tr>
<td><input type="text" id="new_product"></td>
<td><input type="text" id="new_quantity"></td>
<td><input type="text" id="new_date"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>

</table>
</div>

</body>
</html>
</body>

CSS

.pt-3-half { padding-top: 1.4rem; }

Javascript

function edit_row(no)
{
 document.getElementById("edit_button"+no).style.display="none";
 document.getElementById("save_button"+no).style.display="block";
        
 var product=document.getElementById("product_row"+no);
 var quantity=document.getElementById("quantity_row"+no);
 var date=document.getElementById("date_row"+no);
        
 var product_data=product.innerHTML;
 var quantity_data=quantity.innerHTML;
 var date_data=date.innerHTML;
        
 product.innerHTML="<input type='text' id='product_text"+no+"' value='"+product_data+"'>";
 quantity.innerHTML="<input type='text' id='quantity_text"+no+"' value='"+quantity_data+"'>";
 date.innerHTML="<input type='text' id='date_text"+no+"' value='"+date_data+"'>";
}

function save_row(no)
{
 var product_val=document.getElementById("product_text"+no).value;
 var quantity_val=document.getElementById("quantity_text"+no).value;
 var date_val=document.getElementById("date_text"+no).value;

 document.getElementById("product_row"+no).innerHTML=product_val;
 document.getElementById("quantity_row"+no).innerHTML=quantity_val;
 document.getElementById("date_row"+no).innerHTML=date_val;

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

function delete_row(no)
{
 document.getElementById("row"+no+"").outerHTML="";
}

function add_row()
{
 var new_product=document.getElementById("new_product").value;
 var new_quantity=document.getElementById("new_quantity").value;
 var new_date=document.getElementById("new_date").value;
        
 var table=document.getElementById("data_table");
 var table_len=(table.rows.length)-1;
 var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='product_row"+table_len+"'>"+new_product+"</td><td id='quantity_row"+table_len+"'>"+new_quantity+"</td><td id='date_row"+table_len+"'>"+new_date+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";

 document.getElementById("new_product").value="";
 document.getElementById("new_quantity").value="";
 document.getElementById("new_date").value="";
}

【问题讨论】：

标签： html input html-table

【解决方案1】：

您正在为所有<input> 标签使用type="text"。您应该考虑更改 edit_row 函数中的输入类型。

对于数字，输入类型应为number；
对于日期，date;
最后，要渲染一个下拉框，最好的解决方案是使用<select> 标签而不是<input>。不要忘记在<option> 标签内写下您的下拉列表的所有选项（应该全部在一个<select> 标签内）； Here你可以找到一个关于如何使用<select>标签的简单解释。

【讨论】：

谢谢。我改变了号码，日期和工作良好。但是对于 select 不起作用，在 javascript product.innerHTML="