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

Question

我有这个动态表。 添加一行后，会添加两个附加按钮： edit和delete 。 第二列是下拉列表。 此项目中的edit功能有点棘手。 我想以之前选择的项目（保存的项目）作为默认启用列表。

例如，如果保存的行的 level= A ，那么当单击edit时，下拉列表应该被激活，其中级别为A 但是用户应该能够单击下拉列表并选择B或C 。

我评论了导致问题的部分。 当我取消注释它时， Add函数不起作用，我收到这个错误： Uncaught SyntaxError: Unexpected identifier in the line that starts with: level.innerHTML="<select id="levels-list"> for level.innerHTML="<select id="levels-list"> the list in the edit_row函数。

HTML：

<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>

剧本：

var myArray = [{"name":"aaa","level":"A"},{"name":"bbb","level":"B"},{"name":"ccc","level":"C"}];
var addButton=document.getElementById("add-button"); 

//listen to add button. If clicked, store the entered data and append them in the display
addButton.addEventListener('click', add_row, false);

function add_row(){
 event.preventDefault();
 var new_name=document.getElementById("new_name").value;
 var new_level=document.getElementById("levels-list").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='name_row"+table_len+"'>"+new_name+"</td>\
    <td id='level_row"+table_len+"'>"+new_level+"</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_name").value="";
}

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">\
                    <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>" ;*/
}//end

Answer 1

对您的编辑功能进行了一些更改。 使用“no”为下拉框分配了一个不同的 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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-05-26 15:19:06

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-05-26 15:19:06

解决方案1
0 已采纳 2017-05-26 15:19:06