Question

我有一个表格，其中包含一些<tr>（包含一些<td>形式的表格作为输入）。当按下按钮时，我想在表格中添加额外的<tr>所有附件如何在现有表中添加额外的<tr>（所有附件）？在这个附加字段中，我想插入值并仅发送此表单。

＆＃13;

function myFunction() {
    var prCon = document.getElementById("tab_prCon").getElementsByTagName('tbody')[0];
    var row = prCon.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = "<td>" + 0 + "</td>";
    cell2.innerHTML = "<td class=\"col-xs-2\"><input name='login' type='text' placeholder='login' class='form-control'/> </td>";
    cell3.innerHTML = "<td class=\"col-xs-2\"><input name='password' type='text' placeholder='password' class='form-control'/></td>";
    cell4.innerHTML = "<td><button type=\"submit\" class=\"btn btn-success btn-md\">Save</button>\n";
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <table class="table table-bordered table-hover" id="tab_prCon">
            <thead>
                <tr>                  
                    <th class="text-center">
                        #
                    </th>
                    <th class="text-center">
                        login
                    </th>
                    <th class="text-center">
                        password
                    </th>
                    <th class="text-center">
                        action
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr id="addrPrCon">
                   <form action="/login" method="post">
                       <td>1</td>
                       <td class="col-xs-2">
                          <input class="form-control" name="login" type="text" value="login">
                       </td>
                       <td class="col-xs-2">
                          <input class="form-control" name="password" type="text" value="pass">
                       </td>
                       <td>
                          <button class="btn btn-success btn-md" type="submit">Save</button>
                       </td>
                 </form>
                </tr>
            </tbody>
        </table>
        <p>
            Click the button to create a TD element.
        </p><button onclick="myFunction()">Try it</button>
    </body>
</html>

＆＃13;

Answer 1

你会试试吗

function myFunction() {
	var prCon = document.getElementById("tab_prCon").getElementsByTagName('tbody')[0];
	var row = prCon.insertRow(-1);
	var cell1 = row.insertCell(0);
	var cell2 = row.insertCell(1);
	var cell3 = row.insertCell(2);
	var cell4 = row.insertCell(3);
	cell1.innerHTML = "<td>" + 0 + "</td>";
	cell2.innerHTML ="<td class=\"col-xs-2\"><input name='login' type='text' placeholder='login' class='form-control'/> </td>";
	cell3.innerHTML ="<td class=\"col-xs-2\"><input name='password' type='text' placeholder='password' class='form-control'/></td>";
	cell4.innerHTML ="<td><button type=\"submit\" class=\"btn btn-success btn-md\">Save</button>\n";
}

<body>
		<table class="table table-bordered table-hover" id="tab_prCon">
			<thead>
				<tr>
					<th class="text-center">
						#
					</th>
					<th class="text-center">
						login
					</th>
					<th class="text-center">
						password
					</th>
					<th class="text-center">
						action
					</th>
				</tr>
			</thead>
			<tbody>
				<tr id="addrPrCon">
					<td>
						<form action="/login" method="post">
							1
						</form>
					</td>
					<td class="col-xs-2">
						<input class="form-control" name="login" type="text" value="login">
					</td>
					<td class="col-xs-2">
						<input class="form-control" name="password" type="text" value="pass">
					</td>
					<td>
						<button class="btn btn-success btn-md" type="submit">Save</button>
					</td>
				</tr>
			</tbody>
		</table>
		<p>
			Click the button to create a TD element.
		</p>
    <button onclick="myFunction()">Try it</button>
	</body>

Answer 2

将表格作为表格的子元素并不是一个好主意。虽然您可以在表单中插入完整的表。尝试在<tr id="addrPrCon">内插入表单，您可以在表格

中插入所有td标记

Answer 3

function formVal(value){
console.log(value);
}
function myFunction() {
    var prCon = document.getElementById("tab_prCon").getElementsByTagName('tbody')[0];
    var row = prCon.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = "<td>" + 0 + "</td>";
    cell2.innerHTML = "<td class=\"col-xs-2\"><input name='login' type='text' placeholder='login' class='form-control'/> </td>";
    cell3.innerHTML = "<td class=\"col-xs-2\"><input name='password' type='text' placeholder='password' class='form-control'/></td>";
    cell4.innerHTML = "<td><button type=\"submit\" class=\"btn btn-success btn-md\">Save</button>\n";
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <table class="table table-bordered table-hover" id="tab_prCon">
            <thead>
                <tr>                  
                    <th class="text-center">
                        #
                    </th>
                    <th class="text-center">
                        login
                    </th>
                    <th class="text-center">
                        password
                    </th>
                    <th class="text-center">
                        action
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr id="addrPrCon">
                   <form action="/login" method="post">
                   <table>
                       <td>1</td>
                       <td class="col-xs-2">
                          <input class="form-control" name="login" type="text" value="login">
                       </td>
                       <td class="col-xs-2">
                          <input class="form-control" name="password" type="text" value="pass">
                       </td>
                       <td>
                          <button class="btn btn-success btn-md" type="submit" onclick="formVal()">Save</button>
                       </td>
                       </table>
                 </form>
                </tr>
            </tbody>
        </table>
        <p>
            Click the button to create a TD element.
        </p><button onclick="myFunction()">Try it</button>
    </body>
</html>

如何在现有表中添加额外的``（所有附件）？

3 个答案: