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

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

javascript html

如何使用HTML和Javascript编辑动态表中的下拉列表,javascript,html,html-table,dom-events,Javascript,Html,Html Table,Dom Events,我有一张动态的桌子。添加行后，将添加两个附加按钮：edit和delete。第二列是下拉列表。此项中的编辑功能有点棘手。我想使用先前选择的项目（保存的项目）作为默认值启用列表例如，如果保存的行具有级别=A，则当单击编辑时，下拉列表中应包含级别A。但是用户应该能够单击下拉列表并选择B或C 我评论了导致问题的部分。当我取消注释它时，Add函数不起作用，我得到以下错误：Uncaught SyntaxError:Unexpected identifier在以以下开头的行中：level.innerHTML

我有一张动态的桌子。添加行后，将添加两个附加按钮：

edit

和

delete

。第二列是下拉列表。此项中的

编辑功能有点棘手。我想使用先前选择的项目（保存的项目）作为默认值启用列表
例如，如果保存的行具有级别=A
，则当单击编辑
时，下拉列表中应包含级别A
。但是用户应该能够单击下拉列表并选择B
或C

我评论了导致问题的部分。当我取消注释它时，Add
函数不起作用，我得到以下错误：Uncaught SyntaxError:Unexpected identifier
在以以下开头的行中：level.innerHTML=“
用于启用edit\u行
函数中的列表
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>


名称
水平仪
行动
A.
B
C

剧本：
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

var myArray=[{“名称”：“aaa”，“级别”：“A”}，{“名称”：“bbb”，“级别”：“B”}，{“名称”：“ccc”，“级别”：“C”}]；
var addButton=document.getElementById（“添加按钮”）；
//听添加按钮。如果单击，则存储输入的数据并将其附加到显示器中
addButton.addEventListener（'click'，add_行，false）；
函数add_row（）{
event.preventDefault（）；
var new_name=document.getElementById（“new_name”）.value；
var new_level=document.getElementById（“级别列表”）.value；
var table=document.getElementById（“数据表”）；
var table_len=（table.rows.length）-1；
变量行=table.insertRow（table_len）.outerHTML=
"\
“+新名称+”\
“+新_级别+”\
\
\
\
\
";
document.getElementById（“新名称”）.value=“”；
}
功能编辑_行（否）
{
document.getElementById（“编辑按钮”+否）.style.display=“无”；
document.getElementById（“保存按钮”+no）.style.display=“块”；
var name=document.getElementById（“名称行”+no）；
var level=document.getElementById（“level_row”+no）；
var name_data=name.innerHTML；
var level_data=level.innerHTML；
name.innerHTML=“”；
/*level.innerHTML=”\
A\
B\
C\
" ;*/
}//结束

对编辑功能做了一些更改。使用“否”为下拉框指定了一个不同的id，然后使用该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

功能编辑_行（否）
{
document.getElementById（“编辑按钮”+否）.style.display=“无”；
document.getElementById（“保存按钮”+no）.style.display=“块”；
var name=document.getElementById（“名称行”+no）；
var level=document.getElementById（“level_row”+no）；
var name_data=name.innerHTML；
var level_data=level.innerHTML；
name.innerHTML=“”；
level.innerHTML=\
A\
B\
C\
' ;
document.getElementById（“级别列表”+否）。值=级别\数据；
}//结束
对编辑功能做了一些更改。使用“否”为下拉框指定了一个不同的id，然后使用该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

功能编辑_行（否）
{
document.getElementById（“编辑按钮”+否）.style.display=“无”；
document.getElementById（“保存按钮”+no）.style.display=“块”；
var name=document.getElementById（“名称行”+no）；
var level=document.getElementById（“level_row”+no）；
var name_data=name.innerHTML；
var level_data=level.innerHTML；
name.innerHTML=“”；
level.innerHTML=\
A\
B\
C\
' ;
document.getElementById（“级别列表”+否）。值=级别\数据；
}//结束
@Randy没关系，但请记住，我有一个用于数据的数据库。为简单起见，我使用的是数组。我只需要它是一种简单的方法，只用于HTML和javascript（除非这根本不实用）@Randy我更喜欢使用相同的posted方法，因为我觉得它可以让我完全控制HTML内容。话虽如此，如果其他方法都是你能负担得起的，你可以向我建议其他解决方案。这是评论区中的引号问题。这样做可以工作-level.innerHTML='\High\Mid\Low\'；@T.Shah谢谢，但它总是将列表返回到默认值。我希望列表defulat selected item是以前选择的项目。@T.Shah为了一致性，我还编辑了一篇文章，其中假定的值是A、B、C不高、中、低。@Randy没关系，但请记住我有一个数据。为了简单起见，我使用的是数组。我只需要它是一种只使用HTML和javascript的简单方法（除非这根本不实用）@Randy我更喜欢使用相同的posted方法，因为我觉得它可以让我完全控制HTML内容。话虽如此，如果其他方法都是你能负担得起的，你可以向我建议其他解决方案。这是评论区中的引号问题。这样做可以工作-level.innerHTML='\High\Mid\Low\'；@T.Shah谢谢，但它总是将列表返回到默认值。我希望列表defulat selected item是以前选择的一个。@T.Shah为了一致性，我还编辑了一篇文章，其中假定的值是A，B C不高，Mid，Low。它可以工作，但列表selected item不是基于ent的选择。请检查。它是。它可以工作，但所选项目列表不基于输入的选择。请检查。它是。