<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
#basicTable {
border: 1px solid black;
border-collapse: collapse;
}
#basicTable td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<script src="jquery-3.1.0.js"></script>
<script>
$(document).ready(function () {
createTable();
$("#btn").click(function () {
debugger;
addRow();
$("#basicTable").on('click', '.rem', function () {
$(this).parent().parent().remove();
});
$("#btnedit").click(function () {
debugger;
var par = $(this).parent().parent();
var tdName = par.children("td:nth-child(1)");
var tdEmail = par.children("td:nth-child(2)");
var tdPhone = par.children("td:nth-child(3)");
$("#txt1").val(" ");
$("#txt1").focus();
$("#txt2").val(" ");
$("#txt3").val(" ");
//$("#txt1").focus();
});
});
});
function createTable() {
debugger;
var table = $('<table></table>').attr({ id: "basicTable" });
var row = $('<tr></tr>').appendTo(table);
$('<td></td>').text("Name").appendTo(row);
$('<td></td>').text("E-mail").appendTo(row);
$('<td></td>').text("Phone").appendTo(row);
table.appendTo($('#container'));
}
function addRow() {
debugger;
var table = $('#basicTable');
var row = $('<tr></tr>').appendTo(table);
$('<td></td>').text($('#txt1').val()).appendTo(row);
$('<td></td>').text($('#txt2').val()).appendTo(row);
$('<td></td>').text($('#txt3').val()).appendTo(row);
$('<td><input type="button" id="btnedit" value="Edit" /></td>').appendTo(row);
$('<td><input type="button" id="btndel" value="Delete" class="rem" /></td>').appendTo(row);
$("#form").trigger('reset');
return table;
}
// var table = document.createElement('table');
// for (var i = 1; i < 2; i++) {
// var tr = document.createElement('tr');
// var td1 = document.createElement('td');
// var td2 = document.createElement('td');
// var td3 = document.createElement('td');
// var text1 = document.createTextNode('Name');
// var text2 = document.createTextNode('E-mail');
// var text3 = document.createTextNode('Phone')
// td1.appendChild(text1);
// td2.appendChild(text2);
// td3.appendChild(text3);
// tr.appendChild(td1);
// tr.appendChild(td2);
// tr.appendChild(td3);
// table.appendChild(tr);
// }
// document.body.appendChild(table);
//});
//});
// Your code goes here.
</script>
<form id="form">
<fieldset style="display:inline">
<label for="Name" id="lab">Name:</label><input type="text" id="txt1" /><br /><br />
<label for="E-mail" id="lab1">E-mail:</label><input type="email" id="txt2" /><br /><br />
<label for="Phone" id="lab2">Ph.No.:</label><input type="tel" id="txt3" /><br /><br />
<input type="button" id="btn" value="submit" />
</fieldset>
<div id="container" style="position:relative;margin:34px;">
</div>
</form>
</body>
</html>
我正在使用的代码甚至不打印表。我希望当用户填写表单字段并单击提交按钮时，表和行都将可见，它将包含输入的三个输入字段由用户和另外它将两个按钮作为编辑和删除两个额外的coloumns！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<script src="jquery-3.1.0.js"></script>
<script>
$(document).ready(function () {
$("#lab").append(" ", " ");
$("#lab1").append(" ");
$("#lab2").append(" ");
$("#btn").click(function () {
debugger;
var table = document.createElement('table');
for (var i = 1; i < 2; i++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var text1 = document.createTextNode('Name');
var text2 = document.createTextNode('E-mail');
var text3 = document.createTextNode('Phone')
td1.appendChild(text1);
td2.appendChild(text2);
td3.appendChild(text3);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
table.appendChild(tr);
}
document.body.appendChild(table);
});
});
</script>
<form>
<fieldset style="display:inline">
<label for="Name" id="lab">Name:</label><input type="text" id="txt1" /><br /><br />
<label for="E-mail" id="lab1">E-mail:</label><input type="email" id="txt2" /><br /><br />
<label for="Phone" id="lab2">Ph.No.:</label><input type="tel" id="txt3" /><br /><br />
<input type="submit" id="btn" value="submit" />
</fieldset>
</form>
</body>
</html>
答案 0 :(得分：0)
您的代码有效：https://jsfiddle.net/2krdupvc/
您也可以将$(document).ready(function () {}更改为.load，以确保在启动操作之前加载所有内容（不仅仅是DOM）。
确保已加载Jquery，并且控制台中没有错误。
答案 1 :(得分：0)
您犯的错误是您创建的文本节点的值为Name，Email和Phone。相反，如果要使用实际值填充它，则可以从输入属性中简单地使用jquery val()函数。
试试这里的小提琴：https://jsfiddle.net/cujdknuo/
（由于小提琴问题，我已将表格更改为div）
答案 2 :(得分：0)
尝试this.callEditPage（）和callDeletePage（）仅用于测试。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
var table = document.createElement('table');
table.border = "1";
var values = new Array();
values.push(["Name", "E-mail", "Phone No.","Edit","Delete"]);
var name = $('#txt1').val();
var email = $('#txt2').val();
var phone = $('#txt3').val();
var editBtn = "<button type='button' onclick=\"callEditPage()\">Edit</button>";
var delBtn = "<button type='button' onclick=\"callDeletePage()\">Delete</button>";
values.push([name, email, phone,editBtn,delBtn]);
var columnCount = values[0].length;
var row = table.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = values[0][i];
row.appendChild(headerCell);
}
for (var i = 1; i < values.length; i++) {
row = table.insertRow(-1);
for (var j = 0; j < columnCount; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = values[i][j];
}
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
return false;
});
});
function callEditPage()
{
alert("Your Are Inside Edit");
}
function callDeletePage() {
alert("Your Have Deleted");
}
</script>
</head>
<body>
<form>
<div>
<fieldset style="display:inline">
<label for="Name" id="lab">Name:</label><input type="text" id="txt1" /><br /><br />
<label for="E-mail" id="lab1">E-mail:</label><input type="email" id="txt2" /><br /><br />
<label for="Phone" id="lab2">Ph.No.:</label><input type="tel" id="txt3" /><br /><br />
<input type="submit" id="btn" value="submit" />
</fieldset>
<div id="dvTable">
</div>
</div>
</form>
</body>
</html>