如何使用HTML和Javascript编辑动态表格中的下拉列表

时间:2017-05-26 08:23:28

标签: javascript html javascript-events html-table

我有这个动态表。添加一行后,会添加两个额外的按钮: output$probability_chart <- renderPlot({ req(input$countrySelect) idx <- which(input$countrySelect==FVI_DATA_ALL_COUNTRIES) plot(x = dates, y=Composite_Probabilities_1_DF[idx, 2:18], type = "l" , xlab = "Dates", ylab = "Probability", col="blue") lines(Banking_Probabilities_1_DF[idx, 2:18], col="red") }) edit。第二列是下拉列表。此项中的delete功能有点棘手。我想启用列表,其中包含以前选择的项目(保存的项目)作为默认值。

例如,如果已保存的行的级别为edit,则单击A时,应激活下拉列表,其中包含级别edit。但是,用户应该可以点击下拉列表并选择AB

我评论了造成问题的部分。当我取消注释时,C函数不起作用,我收到此错误:Add在以Uncaught SyntaxError: Unexpected identifier开头的行中启用level.innerHTML="<select id="levels-list">函数中的列表

HTML:

edit_row

剧本:

<html>
<head>

</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Level</th>
<th>Action</th>
</tr>

<tr>
<td><input type="text" id="new_name"></td>
<td>
    <select name="levels-list" id="levels-list">
    <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="button" class="add" value="Add Row" id="add-button"></td>
</tr>

</table>
</div>
<script type="text/javascript" src="get-text.js"></script>
</body>
</html>

enter image description here

1 个答案:

答案 0 :(得分:0)

对您的编辑功能稍作修改。使用&#39; no&#39;为下拉框分配了一个不同的ID。然后用它来设置值。

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

 var name=document.getElementById("name_row"+no);
 var level=document.getElementById("level_row"+no);

 var name_data=name.innerHTML;
 var level_data=level.innerHTML;

 name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
 level.innerHTML='<select id="levels-list'+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("levels-list"+no).value = level_data;        

}//end