我试图在Typescript中使用jQuery添加和删除数组字符串。
该程序添加了一个包含删除按钮的人,但它不显示姓氏和其他名称输入值,只有一个,第一次按下“插入”按钮时,它不会显示任何值,直到我再次按下按钮。
当我按下"插入"时,如何允许用户输入输入值,然后显示姓氏和其他名称。按钮?
删除某人时,如何实施简单的提示信息?
使用tsc编译时出现错误消息:
Person.ts: error TS2339: Property 'reset' does not exist on type 'HTMLElement'.
所需的输出示例:
Person 1 (values entered above, first press of button)
Surname: Smith (del-btn)
Othername: Matt (del-btn)
Person 2: (values in inputs reset, new values entered)
Surname: Williams (del-btn)
Othername: Robert (del-btn)
我使用的是jQuery,但我很乐意收到一个Typescript替代品。
到目前为止,这是我的代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="src/Person.js"></script>
<script type="text/javascript" src="src/jquery-3.2.1.js"></script>
</head>
<body>
<form id="form1" name="form1">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" /><br />
<label for="othername">Other Name</label>
<input type="text" name="othername" id="othername" /><br />
<input onclick="newFunction()" id="Button-insert" type="button" value="Insert" />
<p id="demo"></p>
<input type="button" id="Button-reset" value="Reset">
</form>
</body>
</html>
Typescript / jQuery:
function newFunction() {
var all_values =[], demo = $("#demo"), form = $("#form1")[0], surname = $("#surname"), othername = $("#othername");
$('#Button-insert').click(function(){
var temp_val = surname.val();
var temp_va12 = othername.val();
all_values.push(temp_val);
all_values.push(temp_val2);
// create delete button along with the value
demo.append(
'<p>'+temp_val+' <button value="'+temp_val+'" type="button" class="del-btn">Delete</button></p>',
'<p>'+temp_val2+' <button value="'+temp_val2+'" type="button" class="del-btn">Delete</button></p>',
);
form1.reset();
});
$('#Button-reset').click(function(){
all_values = [];
demo.html('');
});
demo.on('click', '.del-btn', function(){
all_values.splice(all_values.indexOf($(this).val()), 1);
$(this).parent().remove();
});
}