<!DOCTYPE html>
<html>
<head>
<title>table</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<style>
.err{border:1px solid red; outline:none;}
.txtfld:readonly{border:none;}
.txtfld{ width:50px;}
</style>
<body>
<div><span>Items:<br>
<select class="items">
<option value="">Select Items</option>
<option value="">Items 6356</option>
<option value="">Items 5700</option>
<option value="">Items 500</option>
</select>
</div>
<input type="button" value="Add Items"/>
<hr>
<div>Item sizes:<br>
<p><input type="checkbox"> 8x10 in</p>
<p><input type="checkbox"> 8x10 in Mammo</p>
<p><input type="checkbox"> 10x12 in</p>
<p><input type="checkbox"> 10x12 in Memmo</p>
<p><input type="checkbox"> 11x14 in</p>
<p><input type="checkbox"> 14x14 in</p>
<p><input type="checkbox"> 14x17 in</p>
</div>
</span>
<table width="580" border="1" class="printer-row">
<tbody><tr>
<td> </td>
<td>8X10 in</td>
<td>10X12 in</td>
<td>8X10 in Memmo</td>
<td>10X12 in Memmo</td>
<td>11X14 in</td>
<td>14X14 in</td>
<td>14X17 in</td>
<td>Total sheets/year</td>
</tr>
<tr>
<td>Item 5700</td>
<td><input type="text" class="txtfld" placeholder="edit" readonly=""></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 5700</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 400</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 3000</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Total sheets/year</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>
</body
> Blockquote
</html>
我想基于项目选择选项创建表行和列“添加更多”按钮将根据我想要创建具有所选项目名称的行的所选项目附加“新项目”。在基于“项目大小”复选框的第二种情况下，我需要创建具有各自名称的列“您可以参考HTML表格以获得更多说明
答案 0 :(得分：0)
检查此代码，我添加了功能
指向检查： - 我添加了一个javascript fucntion add_row（）并调用点击添加按钮。
我添加了选择下拉列表的值。
表
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
function add_row() {
var row_name = $('select').val();
if (row_name != "") {
var row = $('<tr><td>' + row_name + '</td></tr>');
$('input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
row.append('<td><input class="txtfld" type="text" placeholder="edit"></td>')
} else {
row.append('<td></td>')
}
})
row.append('<td></td>')
$("table.printer-row tbody tr:last").before(row)
}
}
</script>
</head>
<style>
.err{border:1px solid red; outline:none;}
.txtfld:readonly{border:none;}
.txtfld{ width:50px;}
</style>
<body>
<div><span>Items:<br>
<select class="items">
<option value="">Select Items</option>
<option value="Items 6356">Items 6356</option>
<option value="Items 5700">Items 5700</option>
<option value="Items 500">Items 500</option>
</select>
</div>
<input type="button" value="Add Items" onclick="add_row();">
<hr>
<div>Item sizes:<br>
<p><input type="checkbox"> 8x10 in</p>
<p><input type="checkbox"> 8x10 in Mammo</p>
<p><input type="checkbox"> 10x12 in</p>
<p><input type="checkbox"> 10x12 in Memmo</p>
<p><input type="checkbox"> 11x14 in</p>
<p><input type="checkbox"> 14x14 in</p>
<p><input type="checkbox"> 14x17 in</p>
</div>
</span>
<table width="580" border="1" class="printer-row">
<tbody><tr>
<td> </td>
<td>8X10 in</td>
<td>10X12 in</td>
<td>8X10 in Memmo</td>
<td>10X12 in Memmo</td>
<td>11X14 in</td>
<td>14X14 in</td>
<td>14X17 in</td>
<td>Total sheets/year</td>
</tr>
<tr>
<td>Item 5700</td>
<td><input type="text" class="txtfld" placeholder="edit" readonly=""></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 5700</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 400</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 3000</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Total sheets/year</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>
</body> Blockquote
</html>