开发者问题收集

函数来替换表中的值

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 press enter 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