用html和JavaScript做了一个表格
如下
html>
<html>
<head>
<meta charset="UTF-8">
head>
<table id="table1">
<thead>
<tr>
<th style="background-color:#C6E0B4;">選択<input type="checkbox" id="select-all" name="select-all">th>
<th style="background-color:#C6E0B4;">氏名th>
<th style="background-color:#C6E0B4;">性別th>
<th style="background-color:#C6E0B4;">住民税th>
tr>
thead>
<tbody>
<tr>
<td><input type="checkbox" class="select-row" name="select-row">td>
<td>张三td>
<td>
<label><input type="radio" name="gender1" value="男性">男性label>
<label><input type="radio" name="gender1" value="女性">女性label>
td>
<td><input type="number" id="a" name="consumption-tax" value="12000">td>
tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row">td>
<td>李四td>
<td>
<label><input type="radio" name="gender2" value="男性">男性label>
<label><input type="radio" name="gender2" value="女性">女性label>
td>
<td><input type="number" id="b" name="consumption-tax" value="22098">td>
tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row">td>
<td>王五td>
<td>
<label><input type="radio" name="gender3" value="男性">男性label>
<label><input type="radio" name="gender3" value="女性">女性label>
td>
<td><input type="number" id="c" name="consumption-tax" value="2200">td>
tr>
tbody>
table>
<hr>
<tbody>
<div>
<p id="left">氏名p>
<p class="right"><input class="input1" id="namae" type="text" style="width: 100%; height: 100%;">p>
<input class="input2" type="button" name="" id="button" value="追加" style="width: 60%;"
onclick='addRow()'>input>
div>
tbody>
<hr>
<input class="input3" type="button" name="" id="button2" value="削除" style="width: 10%;" onclick='deleteRows()'>input>
<hr>
<table>
<tbody>
<tr>
<td style="background-color:#C6E0B4;">合計td>
<td><input type="number" id="d" name="consumption-tax" value="36298">td>
tr>
<tr>
<td style="background-color:#C6E0B4;">男性合計td>
<td><input type="number" id="e" name="consumption-tax" value="34098">td>
tr>
<tr>
<td style="background-color:#C6E0B4;">女性合計td>
<td><input type="number" id="f" name="consumption-tax" value="2000">td>
tr>
tbody>
table>
<script>
// 全部選択
const selectAllCheckbox = document.getElementById('select-all');
const selectRowCheckboxes = document.querySelectorAll('.select-row');
selectAllCheckbox.addEventListener('click', () => {
selectRowCheckboxes.forEach((checkbox) => {
checkbox.checked = selectAllCheckbox.checked;
});
});
//合計
const inputA = document.getElementById('a');
const inputB = document.getElementById('b');
const inputC = document.getElementById('c');
const inputE = document.getElementById('d');
function updateTotal() {
const total = Number(inputA.value) + Number(inputB.value) + Number(inputC.value);
inputE.value = total;
}
inputA.addEventListener('input', updateTotal);
inputB.addEventListener('input', updateTotal);
inputC.addEventListener('input', updateTotal);
//男性の合計
const genderRadioButtons = document.querySelectorAll('input[name^="gender"]');
function updateMaleTotal() {
let maleTotal = 0;
genderRadioButtons.forEach((radioButton) => {
if (radioButton.checked && radioButton.value === "男性") {
const row = radioButton.closest('tr');
const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
maleTotal += Number(residentTaxInput.value);
}
});
document.getElementById('e').value = maleTotal;
}
genderRadioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', updateMaleTotal);
});
//女性選択時女性合計
function updateFemaleTotal() {
let femaleTotal = 0;
genderRadioButtons.forEach((radioButton) => {
if (radioButton.checked && radioButton.value === "女性") {
const row = radioButton.closest('tr');
const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
femaleTotal += Number(residentTaxInput.value);
}
});
document.getElementById('f').value = femaleTotal;
}
genderRadioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', () => {
updateMaleTotal();
updateFemaleTotal();
});
});
//行追加
function addRow() {
var table = document.getElementById("table1");
var newRow = table.insertRow();
var row1 = table.rows[1];
for (var i = 0; i < row1.cells.length; i++) {
var newCell = newRow.insertCell(i);
newCell.innerHTML = row1.cells[i].innerHTML;
}
input.addEventListener('input', updateTotal);
}
//追加行INPUT代入
function addRow() {
const table = document.getElementById('table1').getElementsByTagName('tbody')[0];
const newRow = table.insertRow(-1);
const checkBoxCell = newRow.insertCell(0);
checkBoxCell.innerHTML = '';
const nameCell = newRow.insertCell(1);
nameCell.textContent = document.getElementById('namae').value;
const genderCell = newRow.insertCell(2);
genderCell.innerHTML = '';
const taxCell = newRow.insertCell(3);
taxCell.innerHTML = '';
}
//CHECKBOX選択行削除
function deleteRows() {
var table = document.getElementById("table1");
var checkboxes = table.getElementsByTagName("input");
var selectedRows = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox" && checkboxes[i].checked) {
selectedRows.push(checkboxes[i].parentNode.parentNode);
}
}
for (var i = 0; i < selectedRows.length; i++) {
table.deleteRow(selectedRows[i].rowIndex);
}
}
script>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
.table1 {
border-collapse: collapse;
}
#left {
width: 50%;
border: 1px solid black;
background-color: #C6E0B4;
padding: 10px;
}
.right {
width: 50%;
border: 1px solid black;
background-color: white;
padding: 10px;
}
div {
display: flex;
width: 30%;
}
.input1 {
border: none;
}
.input2 {
margin: 10px;
padding: 20px;
background-color: #4472C4;
}
.input3 {
margin: auto 0;
background-color: red;
border: none
}
style>
html>
提问！！
怎么样能够实现点击了追加按键，追加的一行也能实现被全选，追加一行的数字也能计入合计。
并且按下男性或者女性的选择按键，下面的男性女性的合计也会改变。
修改代码如下，多解决了新增多次次性别选择按钮导致name相等的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<table id="table1">
<thead>
<tr>
<th style="background-color:#C6E0B4;">選択<input type="checkbox" id="select-all" name="select-all"></th>
<th style="background-color:#C6E0B4;">氏名</th>
<th style="background-color:#C6E0B4;">性別</th>
<th style="background-color:#C6E0B4;">住民税</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>张三</td>
<td>
<label><input type="radio" name="gender1" value="男性">男性</label>
<label><input type="radio" name="gender1" value="女性">女性</label>
</td>
<td><input type="number" id="a" name="consumption-tax" value="12000"></td>
</tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>李四</td>
<td>
<label><input type="radio" name="gender2" value="男性">男性</label>
<label><input type="radio" name="gender2" value="女性">女性</label>
</td>
<td><input type="number" id="b" name="consumption-tax" value="22098"></td>
</tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>王五</td>
<td>
<label><input type="radio" name="gender3" value="男性">男性</label>
<label><input type="radio" name="gender3" value="女性">女性</label>
</td>
<td><input type="number" id="c" name="consumption-tax" value="2200"></td>
</tr>
</tbody>
</table>
<hr>
<tbody>
<div>
<p id="left">氏名</p>
<p class="right"><input class="input1" id="namae" type="text" style="width: 100%; height: 100%;"></p>
<input class="input2" type="button" name="" id="button" value="追加" style="width: 60%;"
onclick='addRow()'></input>
</div>
</tbody>
<hr>
<input class="input3" type="button" name="" id="button2" value="削除" style="width: 10%;" onclick='deleteRows()'></input>
<hr>
<table>
<tbody>
<tr>
<td style="background-color:#C6E0B4;">合計</td>
<td><input type="number" id="d" name="consumption-tax" value="36298"></td>
</tr>
<tr>
<td style="background-color:#C6E0B4;">男性合計</td>
<td><input type="number" id="e" name="consumption-tax" value="34098"></td>
</tr>
<tr>
<td style="background-color:#C6E0B4;">女性合計</td>
<td><input type="number" id="f" name="consumption-tax" value="2000"></td>
</tr>
</tbody>
</table>
<script>
// 全部選択
const selectAllCheckbox = document.getElementById('select-all');
selectAllCheckbox.addEventListener('click', () => {
const selectRowCheckboxes = document.querySelectorAll('.select-row');
selectRowCheckboxes.forEach((checkbox) => {
checkbox.checked = selectAllCheckbox.checked;
});
});
//合計
const inputA = document.getElementById('a');
const inputB = document.getElementById('b');
const inputC = document.getElementById('c');
const inputE = document.getElementById('d');
function updateTotal() {
const tables = document.getElementById("table1").querySelectorAll('input[name="consumption-tax"]')
let total = 0;
tables.forEach((v,i)=>{
total+=Number(v.value)
})
inputE.value = total;
}
inputA.addEventListener('input', updateTotal);
inputB.addEventListener('input', updateTotal);
inputC.addEventListener('input', updateTotal);
//男性の合計
let genderRadioButtons = document.querySelectorAll('input[name^="gender"]');
function updateMaleTotal() {
let maleTotal = 0;
genderRadioButtons.forEach((radioButton) => {
if (radioButton.checked && radioButton.value === "男性") {
const row = radioButton.closest('tr');
const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
maleTotal += Number(residentTaxInput.value);
}
});
document.getElementById('e').value = maleTotal;
}
genderRadioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', updateMaleTotal);
});
//女性選択時女性合計
function updateFemaleTotal() {
let femaleTotal = 0;
genderRadioButtons.forEach((radioButton) => {
if (radioButton.checked && radioButton.value === "女性") {
const row = radioButton.closest('tr');
const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
femaleTotal += Number(residentTaxInput.value);
}
});
document.getElementById('f').value = femaleTotal;
}
genderRadioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', () => {
updateMaleTotal();
updateFemaleTotal();
});
});
//行追加
function addRow() {
var table = document.getElementById("table1");
var newRow = table.insertRow();
var row1 = table.rows[1];
for (var i = 0; i < row1.cells.length; i++) {
var newCell = newRow.insertCell(i);
newCell.innerHTML = row1.cells[i].innerHTML;
}
input.addEventListener('input', updateTotal);
}
//追加行INPUT代入
let gender = 4
function addRow() {
const table = document.getElementById('table1').getElementsByTagName('tbody')[0];
const newRow = table.insertRow(-1);
const checkBoxCell = newRow.insertCell(0);
checkBoxCell.innerHTML = '<input type="checkbox" class="select-row" name="select-row">';
const nameCell = newRow.insertCell(1);
nameCell.textContent = document.getElementById('namae').value;
const genderCell = newRow.insertCell(2);
genderCell.innerHTML = `<label><input type="radio" name="gender${gender}" value="男性">男性</label><label><input type="radio" name="gender${gender}" value="女性">女性</label>`;
gender++
const taxCell = newRow.insertCell(3);
taxCell.innerHTML = '<input type="number" oninput="updateTotal()" name="consumption-tax" value="0">';
genderRadioButtons = document.querySelectorAll('input[name^="gender"]');
genderRadioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', () => {
updateMaleTotal();
updateFemaleTotal();
});
});
}
//CHECKBOX選択行削除
function deleteRows() {
var table = document.getElementById("table1");
var checkboxes = table.getElementsByTagName("input");
var selectedRows = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox" && checkboxes[i].checked) {
selectedRows.push(checkboxes[i].parentNode.parentNode);
}
}
for (var i = 0; i < selectedRows.length; i++) {
table.deleteRow(selectedRows[i].rowIndex);
}
}
</script>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
.table1 {
border-collapse: collapse;
}
#left {
width: 50%;
border: 1px solid black;
background-color: #C6E0B4;
padding: 10px;
}
.right {
width: 50%;
border: 1px solid black;
background-color: white;
padding: 10px;
}
div {
display: flex;
width: 30%;
}
.input1 {
border: none;
}
.input2 {
margin: 10px;
padding: 20px;
background-color: #4472C4;
}
.input3 {
margin: auto 0;
background-color: red;
border: none
}
</style>
</html>
参考GPT和自己的思路：这里有一个问题：
在您的 HTML 中，您使用了 <tbody> 元素来包含除 <thead>以外的表格部分。然而，您在两个地方使用了 <hr> 元素来分隔表格内容，这样做会导致 <tbody> 元素的结束标签被放置在第一个 <hr> 元素之后，而不是在表格的最后。因此，当浏览器尝试解析您的 HTML 代码时，它会发现没有正确结束的 <tbody> 元素，并尝试自动修复您的代码，这可能会导致意外的行为。
为了避免这种问题，您可以将 <tbody> 元素的开始和结束标签移动到包含整个表格的位置，例如：
<table id="table1">
<thead>
<!-- 表头内容 -->
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
<tfoot>
<!-- 表尾内容 -->
</tfoot>
</table>
<hr>
<div>
<!-- 表格操作区域 -->
</div>
然后在两个地方使用 <hr>元素来分隔表格内容，这样就不会出现自动修复问题。
那你就把追加后的逻辑都写在点击追加那个函数内部不就行了，这样在你点击追加以后，程序继续往下执行，你想怎么计算都可以
参考GPT和自己的思路，修改后的代码如下。主要的修改包括添加追加按钮的功能、增加全选/反选功能、实现追加的行也能够计入合计，并且按下男性或者女性的选择按钮，下面的男性女性的合计也会改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table id="table1">
<thead>
<tr>
<th style="background-color:#C6E0B4;"><input type="checkbox" id="select-all" name="select-all">選択</th>
<th style="background-color:#C6E0B4;">氏名</th>
<th style="background-color:#C6E0B4;">性別</th>
<th style="background-color:#C6E0B4;">住民税</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>张三</td>
<td>
<label><input type="radio" name="gender1" value="男性">男性</label>
<label><input type="radio" name="gender1" value="女性">女性</label>
</td>
<td><input type="number" class="consumption-tax" value="12000"></td>
</tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>李四</td>
<td>
<label><input type="radio" name="gender2" value="男性">男性</label>
<label><input type="radio" name="gender2" value="女性">女性</label>
</td>
<td><input type="number" class="consumption-tax" value="22098"></td>
</tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>王五</td>
<td>
<label><input type="radio" name="gender3" value="男性">男性</label>
<label><input type="radio" name="gender3" value="女性">女性</label>
</td>
<td><input type="number" class="consumption-tax" value="2200"></td>
</tr>
</tbody>
</table>
<hr>
<div>
<p id="left">氏名</p>
<p class="right"><input class="input1" id="namae" type="text" style="width: 100%; height: 100%;"></p>
<input class="input2" type="button" name="" id="button" value="追加" style="width: 60%;" onclick='addRow()'>
</div>
<hr>
<input class="input3" type="button" name="" id="button2" value="削除" style="width: 10%;" onclick='deleteRows()'>
<hr>
<table>
<tbody>
<tr>
<td style="background-color:#C6E0B4;">合計</td>
</tr>
<tr>
<td>张三</td>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
</tr>
<tr>
<td>王五</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html>
javascript需要追加以下代码：
document.addEventListener('DOMContentLoaded', function() {
var subTotalCells = document.querySelectorAll('.subtotal');
var grandTotalCell = document.querySelector('.grandtotal');
var calculateSubTotal = function() {
var subTotal = 0;
for (var i = 0; i < subTotalCells.length; i++) {
subTotal += parseFloat(subTotalCells[i].textContent);
}
return subTotal;
};
var updateGrandTotal = function() {
grandTotalCell.textContent = calculateSubTotal();
};
var updateSubTotal = function() {
var quantity = parseFloat(this.value);
var priceCell = this.parentElement.previousElementSibling;
var price = parseFloat(priceCell.textContent);
var subTotalCell = this.parentElement.nextElementSibling;
var subTotal = quantity * price;
subTotalCell.textContent = subTotal.toFixed(2);
updateGrandTotal();
};
for (var i = 0; i < subTotalCells.length; i++) {
var quantityInput = subTotalCells[i].previousElementSibling.firstElementChild;
quantityInput.addEventListener('input', updateSubTotal);
}
});
这个代码包括了以下功能：
当页面加载完成后，通过 document.addEventListener 来绑定一个回调函数，以确保我们的代码在页面完全加载后才执行。
获取所有的小计单元格和总计单元格，分别存储在 subTotalCells 和 grandTotalCell 变量中。
定义了 calculateSubTotal 函数，它遍历所有小计单元格，将其内容转换为浮点数并求和，然后返回总和。
定义了 updateGrandTotal 函数，它调用 calculateSubTotal 函数来计算总计，然后将其结果更新到总计单元格中。
定义了 updateSubTotal 函数，它在输入框内容发生变化时被调用，计算当前行的小计并更新相应单元格的内容，然后调用 updateGrandTotal 函数更新总计。
遍历所有小计单元格，为每个小计单元格的输入框绑定 input 事件，当输入框内容变化时调用 updateSubTotal 函数。
回答不易，还请采纳
创建元素的时候给其追加click事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<table id="table1" class="data">
<thead>
<tr>
<th style="background-color:#C6E0B4;">選択<input type="checkbox" id="select-all" name="select-all"></th>
<th style="background-color:#C6E0B4;">氏名</th>
<th style="background-color:#C6E0B4;">性別</th>
<th style="background-color:#C6E0B4;">住民税</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>张三</td>
<td>
<label><input type="radio" name="gender1" value="男性">男性</label>
<label><input type="radio" name="gender1" value="女性">女性</label>
</td>
<td><input type="number" id="a" name="consumption-tax" value="12000"></td>
</tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>李四</td>
<td>
<label><input type="radio" name="gender2" value="男性">男性</label>
<label><input type="radio" name="gender2" value="女性">女性</label>
</td>
<td><input type="number" id="b" name="consumption-tax" value="22098"></td>
</tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>王五</td>
<td>
<label><input type="radio" name="gender3" value="男性">男性</label>
<label><input type="radio" name="gender3" value="女性">女性</label>
</td>
<td><input type="number" id="c" name="consumption-tax" value="2200"></td>
</tr>
</tbody>
</table>
<hr>
<tbody>
<div>
<p id="left">氏名</p>
<p class="right"><input class="input1" id="namae" type="text" style="width: 100%; height: 100%;"></p>
<input class="input2" type="button" name="" id="button" value="追加" style="width: 60%;"
onclick='addRow()'></input>
</div>
</tbody>
<hr>
<input class="input3" type="button" name="" id="button2" value="削除" style="width: 10%;" onclick='deleteRows()'></input>
<hr>
<table>
<tbody>
<tr>
<td style="background-color:#C6E0B4;">合計</td>
<td><input type="number" id="d" name="consumption-tax" value=""></td>
</tr>
<tr>
<td style="background-color:#C6E0B4;">男性合計</td>
<td><input type="number" id="e" name="consumption-tax" value=""></td>
</tr>
<tr>
<td style="background-color:#C6E0B4;">女性合計</td>
<td><input type="number" id="f" name="consumption-tax" value=""></td>
</tr>
</tbody>
</table>
<script>
// 全部選択
const selectAllCheckbox = document.getElementById('select-all');
const selectRowCheckboxes = document.querySelectorAll('.select-row');
selectAllCheckbox.addEventListener('click', () => {
selectRowCheckboxes.forEach((checkbox) => {
checkbox.checked = selectAllCheckbox.checked;
});
});
function getAllInput() {
const result = []
document.querySelectorAll('.data input[name="consumption-tax"]').forEach(item=>result.push(item));
return result
}
function updateTotal() {
let total = getAllInput().reduce((total, item) => {
return total + parseInt(item.value)
}, 0);
document.getElementById("d").value = total;
}
getAllInput().forEach(item => item.addEventListener('input', updateTotal))
function getAllGenderRadioButtons() {
return document.querySelectorAll('input[name^="gender"]')
}
//男性の合計
function updateMaleTotal() {
let maleTotal = 0;
getAllGenderRadioButtons().forEach((radioButton) => {
if (radioButton.checked && radioButton.value === "男性") {
const row = radioButton.closest('tr');
const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
maleTotal += Number(residentTaxInput.value);
}
});
document.getElementById('e').value = maleTotal;
}
//女性選択時女性合計
function updateFemaleTotal() {
let femaleTotal = 0;
getAllGenderRadioButtons().forEach((radioButton) => {
if (radioButton.checked && radioButton.value === "女性") {
const row = radioButton.closest('tr');
const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
femaleTotal += Number(residentTaxInput.value);
}
});
document.getElementById('f').value = femaleTotal;
}
getAllGenderRadioButtons().forEach((radioButton) => {
radioButton.addEventListener('click', () => {
updateMaleTotal();
updateFemaleTotal();
});
});
updateTotal()
updateMaleTotal()
updateFemaleTotal()
//追加行INPUT代入
function addRow() {
const table = document.getElementById('table1').getElementsByTagName('tbody')[0];
const newRow = table.insertRow(-1);
const checkBoxCell = newRow.insertCell(0);
checkBoxCell.innerHTML = '<input type="checkbox" class="select-row" name="select-row">';
const nameCell = newRow.insertCell(1);
nameCell.textContent = document.getElementById('namae').value;
const genderCell = newRow.insertCell(2);
genderCell.innerHTML = '<label><input type="radio" name="gender" value="男性">男性</label><label><input type="radio" name="gender" value="女性">女性</label>';
genderCell.querySelectorAll("input").forEach(item=>item.addEventListener('click', () => {
updateMaleTotal();
updateFemaleTotal();
}))
const taxCell = newRow.insertCell(3);
taxCell.innerHTML = '<input type="number" name="consumption-tax" value="0">';
taxCell.querySelectorAll("input").forEach(item=>item.addEventListener('click', updateTotal))
}
//CHECKBOX選択行削除
function deleteRows() {
var table = document.getElementById("table1");
var checkboxes = table.getElementsByTagName("input");
var selectedRows = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox" && checkboxes[i].checked) {
selectedRows.push(checkboxes[i].parentNode.parentNode);
}
}
for (var i = 0; i < selectedRows.length; i++) {
table.deleteRow(selectedRows[i].rowIndex);
}
}
</script>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
.table1 {
border-collapse: collapse;
}
#left {
width: 50%;
border: 1px solid black;
background-color: #C6E0B4;
padding: 10px;
}
.right {
width: 50%;
border: 1px solid black;
background-color: white;
padding: 10px;
}
div {
display: flex;
width: 30%;
}
.input1 {
border: none;
}
.input2 {
margin: 10px;
padding: 20px;
background-color: #4472C4;
}
.input3 {
margin: auto 0;
background-color: red;
border: none
}
</style>
</html>