如何在单击添加按钮时用动态值填充 <td>
How to fill the <td> with dynamic value on add button click
要求:
我想在单击添加按钮后用动态值填充 td
值。
代码
<script>
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name);
var row = document.createElement("TR");
var td1 = document.createElement("TD")
var strHtml1= "<Rule Id>";
td1.innerHTML = strHtml1.replace(/!count!/g,count);
var td2 = document.createElement("TD")
var strHtml2 = "<Rule Name>7;
td2.innerHTML = strHtml2.replace(/!count!/g,count);
row.appendChild(td1);
row.appendChild(td2);
</script>
<td>Selected Plans
<br>
<table ID="in_tbl_name" border="1">
<tr>
<td>Rule Id</td>
<td>Rule Name</td>
</tr>
</table>
<form action="/SubmitRule" method="post" model="command">
<table>
<tr>
<td>
<select name="Select"><c:forEach items="${listRules}" var="rule">
<option value="${rule.id}">
<c:out value="${rule.id}" />
</option>
</c:forEach>
</select>
</td>
<td>
<input type="submit" onClick="addRow('in_tbl_name')"
VALUE="AddRow">
</tr>
</table>
</form>
</td>
我正在获取 id
的值,但不明白如何将该值放入 td
。
其实你现在的代码里面有很多Javascript和HTML的问题,你需要多看看Javascript和HTML深入学习之前的课程。
否则你需要编辑你的代码和你处理问题的方式,以避免一些问题,例如:
在你的 javascript 函数中你不需要传递 table id 作为参数(你在 HTML 上做错了),你可以只需在 Javascript 上使用 id 而不传递它,因为您在这里处理的是单个 table。
您的 javascript 功能没有正确关闭,这将在控制台上引发错误(按 F12 可以看到它,它应该正确关闭并且最后,您没有将 tbody
附加到 table
,因此永远不会添加该行。
并且您的 HTML
代码也不正确,例如您将整个代码放在 <td>
中,而 <table>
或 <tr>
,你可以只用一个<div>
来包裹整个内容。
在您的 Javascript 代码中您缺少一些引号 "
,并且在您的 HTML 代码中您缺少一些应该修复的结束标记,并且table header 的第一个 <td>
可以替换为 <th>
个元素。
我在这里尝试更新您的代码以使其更加连贯:
<script>
function addRow() {
var table = document.getElementById('in_tbl_name');
var row = document.createElement("TR");
var td1 = document.createElement("TD")
var strHtml1 = "<Rule Id>";
td1.innerHTML = strHtml1.replace(/!count!/g, "count");
var td2 = document.createElement("TD")
var strHtml2 = "<Rule Name>";
td2.innerHTML = strHtml2.replace(/!count!/g,count);
row.appendChild(td1);
row.appendChild(td2);
table.appendChild(row);
}
</script>
<div>Selected Plans
<br>
<table ID="in_tbl_name" border="1">
<tr>
<td>Rule Id</td>
<td>Rule Name</td>
</tr>
</table>
<form action="/SubmitRule" method="post" model="command">
<table>
<tr>
<td>
<select name="Select">
<c:forEach items="${listRules}" var="rule">
<option value="${rule.id}">
<c:out value="${rule.id}" />
</option>
</c:forEach>
</select>
</td>
<td>
<input type="submit" onClick="addRow()" VALUE="AddRow" />
</td>
</tr>
</table>
</form>
</div>
然后您需要更多地关注代码的逻辑以及如何解决添加新行的问题。
这里是在 table 中添加行并从 table
中删除最后添加的行的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script>
var count=0;
function addRow(tableId)
{
count++;
var element1=document.getElementById(tableId);
var tr=document.createElement("tr");
tr.id="row"+count;
var td1=document.createElement("td");
var td2=document.createElement("td");
var td3=document.createElement("td");
td1.innerHTML="row"+count+" col 1";
td2.innerHTML="row"+count+" col 2";
td3.innerHTML="row"+count+" col 3";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
element1.appendChild(tr);
alert('row'+count);
}
function removeRow(tableId)
{
var element1=document.getElementById(tableId);
var row=document.getElementById('row'+count);
alert('row'+count);
element1.removeChild(row);
count--;
}
</script>
</head>
<body>
<h1>Hello World!</h1>
<a href="javascript:addRow('table')">Add Row</a><a href="javascript:removeRow('table')" >Remove</a>
<table id="table" border='1'>
</table>
</body>
</html>
要求:
我想在单击添加按钮后用动态值填充 td
值。
代码
<script>
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name);
var row = document.createElement("TR");
var td1 = document.createElement("TD")
var strHtml1= "<Rule Id>";
td1.innerHTML = strHtml1.replace(/!count!/g,count);
var td2 = document.createElement("TD")
var strHtml2 = "<Rule Name>7;
td2.innerHTML = strHtml2.replace(/!count!/g,count);
row.appendChild(td1);
row.appendChild(td2);
</script>
<td>Selected Plans
<br>
<table ID="in_tbl_name" border="1">
<tr>
<td>Rule Id</td>
<td>Rule Name</td>
</tr>
</table>
<form action="/SubmitRule" method="post" model="command">
<table>
<tr>
<td>
<select name="Select"><c:forEach items="${listRules}" var="rule">
<option value="${rule.id}">
<c:out value="${rule.id}" />
</option>
</c:forEach>
</select>
</td>
<td>
<input type="submit" onClick="addRow('in_tbl_name')"
VALUE="AddRow">
</tr>
</table>
</form>
</td>
我正在获取 id
的值,但不明白如何将该值放入 td
。
其实你现在的代码里面有很多Javascript和HTML的问题,你需要多看看Javascript和HTML深入学习之前的课程。
否则你需要编辑你的代码和你处理问题的方式,以避免一些问题,例如:
在你的 javascript 函数中你不需要传递 table id 作为参数(你在 HTML 上做错了),你可以只需在 Javascript 上使用 id 而不传递它,因为您在这里处理的是单个 table。
您的 javascript 功能没有正确关闭,这将在控制台上引发错误(按 F12 可以看到它,它应该正确关闭并且最后,您没有将
tbody
附加到table
,因此永远不会添加该行。并且您的
HTML
代码也不正确,例如您将整个代码放在<td>
中,而<table>
或<tr>
,你可以只用一个<div>
来包裹整个内容。在您的 Javascript 代码中您缺少一些引号
"
,并且在您的 HTML 代码中您缺少一些应该修复的结束标记,并且table header 的第一个<td>
可以替换为<th>
个元素。
我在这里尝试更新您的代码以使其更加连贯:
<script>
function addRow() {
var table = document.getElementById('in_tbl_name');
var row = document.createElement("TR");
var td1 = document.createElement("TD")
var strHtml1 = "<Rule Id>";
td1.innerHTML = strHtml1.replace(/!count!/g, "count");
var td2 = document.createElement("TD")
var strHtml2 = "<Rule Name>";
td2.innerHTML = strHtml2.replace(/!count!/g,count);
row.appendChild(td1);
row.appendChild(td2);
table.appendChild(row);
}
</script>
<div>Selected Plans
<br>
<table ID="in_tbl_name" border="1">
<tr>
<td>Rule Id</td>
<td>Rule Name</td>
</tr>
</table>
<form action="/SubmitRule" method="post" model="command">
<table>
<tr>
<td>
<select name="Select">
<c:forEach items="${listRules}" var="rule">
<option value="${rule.id}">
<c:out value="${rule.id}" />
</option>
</c:forEach>
</select>
</td>
<td>
<input type="submit" onClick="addRow()" VALUE="AddRow" />
</td>
</tr>
</table>
</form>
</div>
然后您需要更多地关注代码的逻辑以及如何解决添加新行的问题。
这里是在 table 中添加行并从 table
中删除最后添加的行的代码<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script>
var count=0;
function addRow(tableId)
{
count++;
var element1=document.getElementById(tableId);
var tr=document.createElement("tr");
tr.id="row"+count;
var td1=document.createElement("td");
var td2=document.createElement("td");
var td3=document.createElement("td");
td1.innerHTML="row"+count+" col 1";
td2.innerHTML="row"+count+" col 2";
td3.innerHTML="row"+count+" col 3";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
element1.appendChild(tr);
alert('row'+count);
}
function removeRow(tableId)
{
var element1=document.getElementById(tableId);
var row=document.getElementById('row'+count);
alert('row'+count);
element1.removeChild(row);
count--;
}
</script>
</head>
<body>
<h1>Hello World!</h1>
<a href="javascript:addRow('table')">Add Row</a><a href="javascript:removeRow('table')" >Remove</a>
<table id="table" border='1'>
</table>
</body>
</html>