在 html 和 javascript 中减少 2 个相同的下拉列表数据

Question

我的代码使用了 2 个相同的 Product 下拉列表值：在 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 中再次减少显示下拉数据库？

我的代码link：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="";
}

Answer 1

首先，考虑将其发布到 https://codereview.stackexchange.com/ 以获得对您的代码的广泛审查，因为有很多地方可以做得更好。目前有两个建议：

避免在你的 JS 中硬编码 HTML（这个问题是第一步）
通常没有必要给每样东西一个唯一的 ID。相反，您通常可以在类的帮助下引用彼此相关的所有内容。例如，edit/save/delete 按钮可以查找它们所在的 table 行以找到它们需要的元素。

在这种特定情况下，您可以从 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);

在 html 和 javascript 中减少 2 个相同的下拉列表数据

reduce 2 same data of dropdown list in html and javascript

javascript

html

dropdown