函数来替换表中的值
2020-11-10
160
function m(r, c) {
return document.querySelector("table").querySelectorAll("tr")[r].querySelectorAll("td")[c-1].innerHTML;
}
<div>
<table class="table1" style="width:100%;font-weight:bold ;font-size:13px;text-align:center; border: 1px solid black;">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
<a>row 1 : </a><input id="1" ></input><br>
<a>row 2 : </a><input id="2" ></input><br>
<a>row 3 : </a><input id="3" ></input><br>
3个回答
您可以将
m
函数绑定到每个
input
选择器的
onchange
事件。
onchange
event will be called whenever the input value is changed. (So when the user pressenter
and the value is changed, that event will be called.)
并且在
m
函数上,您可以根据
event.target.value
更改
td
的值。
function m(r, event) {
const tds = document.querySelector("table").querySelectorAll("tr")[r].querySelectorAll("td");
tds.forEach((item) => {
item.innerHTML = event.target.value;
});
}
<div>
<table class="table1" style="width:100%;font-weight:bold ;font-size:13px;text-align:center; border: 1px solid black;">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
<a>row 1 : </a><input id="1" onchange="m(0, event)"></input><br>
<a>row 2 : </a><input id="2" onchange="m(1, event)"></input><br>
<a>row 3 : </a><input id="3" onchange="m(2, event)"></input><br>
Derek Wang
2020-11-10
Derek 的回答是正确的,但没有乘以值,这里是完整的函数:(我没有足够的声誉来评论 Derek 的回答)
<div>
<table class="table1"
style="width:100%;font-weight:bold ;font-size:13px;text-align:center; border: 1px solid black;">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
<a>row 1 : </a><input id="1" onchange="m(0, event)"></input><br>
<a>row 2 : </a><input id="2" onchange="m(1, event)"></input><br>
<a>row 3 : </a><input id="3" onchange="m(2, event)"></input><br>
<script type="text/javascript">
function m(r, event) {
const tds = document.querySelector("table").querySelectorAll("tr")[r].querySelectorAll("td");
tds.forEach((item) => {
item.innerHTML = event.target.value * item.innerHTML;
});
}
</script>
ortoDev
2020-11-10
您需要一个 事件监听器 来监控输入字段的变化。请参阅代码片段以获取示例。
// add a document wide listener for the change event
document.addEventListener("change", multiply);
function multiply(evt) {
// retrieve the element the event originates from
const origin = evt.target;
// continue only if the origin contains [data-row]-value
// aka event delegation
if (origin.dataset.row) {
// continue if origin has value
if (origin.value > 0) {
// retrieve the cells from row [dataset.row]
document.querySelectorAll(`table tr:nth-child(${origin.dataset.row}) td`)
.forEach(cell => {
const inputValue = origin.value;
const cando = inputValue >= +origin.min && inputValue <= +origin.max;
// continue if value >= 1 and value <= 5 (min, max)
if (cando && +cell.textContent > 0) {
// write the product to the cell
cell.textContent = +cell.textContent * +origin.value;
}
});
}
}
}
input[type=number] {
width: 40px;
}
.table1 {
width: 100%;
font-weight: bold;
font-size: 13px;
text-align: center;
border: 1px solid black;
}
<div>
<table class="table1">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
<p>row 1 : <input data-row="1" id="1" type="number" min="1" max="5" step="1"></p>
<p>row 2 : <input data-row="2" id="2" type="number" min="1" max="5" step="1"></p>
<p>row 3 : <input data-row="3" id="3" type="number" min="1" max="5" step="1"></p>
KooiInc
2020-11-10