在html和javascript中减少2个相同的下拉列表数据
在html和javascript中减少2个相同的下拉列表数据
提问于 2022-01-04 11:17:22
我的代码使用了两个相同值的产品下拉列表: html和javascript。
当我编辑我的产品数据，需要双重更新2位。
在html中：
<td ><select name="product_text" id="new_product">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>在Javascript中
product.innerHTML='<select id="product_text'+no+'">\
<option value="A" id="option-1">A</option>\
<option value="B" id="option-2">B</option>\
<option value="C" id="option-3">C</option>\
</select>' ;如何使用javascript中的函数来减少javascript中的显示下拉数据库？
我的代码链接：https://jsfiddle.net/bvotcode/b6wj85dt/21/
HTML
<meta name="Table dropdown number va date" content="dropdown number va date">
<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>
<td ><select name="product_text" id="new_product">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>
<td><input type="number" id="new_quantity"></td>
<td><input type="date" id="new_date"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>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='<select id="product_text'+no+'">\
<option value="A" id="option-1">A</option>\
<option value="B" id="option-2">B</option>\
<option value="C" id="option-3">C</option>\
</select>' ;
document.getElementById("product_text"+no).value = product_data;
quantity.innerHTML="<input type='number' id='quantity_text"+no+"' value='"+quantity_data+"'>";
date.innerHTML="<input type='date' 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="";
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-04 17:21:12
首先，考虑在https://codereview.stackexchange.com/上发布这篇文章，以便对您的代码进行广泛的审查，因为还有很多事情可以做得更好。目前有两项建议：
- 避免在JS中硬编码
(这个问题是第一步)
- 通常不需要为所有事物提供唯一的ID，相反，您通常可以相互引用所有相关的内容，可能需要类的帮助。例如，编辑/保存/删除按钮可以查找它们所在的表行以查找它们需要的元素。
在这种特殊情况下，您可以从HTML中克隆现有的select：
val productText = document.getElementById("product_text").cloneNode();
// Change the ID
productText.id = "product_text" + no;
// Set the value
productText.value = product_data;
// Clear the parent
// (There are better ways to empty an element, but I'm just using this for now)
product.innerHTML = "";
// Insert the cloned element
product.appendChild(productText);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70577950
复制相关文章
相似问题
腾讯云开发者
