时间戳

首页 > 解决方案 > jQuery 如何在 html 表格中使用 .nextAll()

html - jQuery 如何在 html 表格中使用 .nextAll()

问题描述

我要创建函数，当在第 3 行、第 4 行和第 5 行中输入 100 时，它下面的行也将插入 100。我正在使用 nextAll() 尝试执行此操作，但我认为它不起作用，因为这些行没有按顺序排列在一起。有什么我做的不对吗？

 $("input[id^=row]").on("change", function() {
        $(this).nextAll("input[id^=row]").val($(this).val());
        console.log($(this).val())
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
        <th>Year</th>
        <th>Age</th>
        <th>Annual Premium<br>(Beginning of Year)</th>
        <th>Benefits<br>(End of Year)</th>
        <th>Time</th>
        <th>Policyholder's Cashflow</th>
    </tr>
    <tr>
        <td>1</td>
        <td>3</td>
        <td id='annual0'>0</td>
        <td id='benefit0'><input class='row' id='row0'></td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>4</td>
        <td id='annual1'>0</td>
        <td id='benefit1'><input class='row' id='row1'></td>
        <td>1</td>
        <td></td>
    </tr>
    <tr>
        <td>3</td>
        <td>5</td>
        <td id='annual2'>0</td>
        <td id='benefit2'><input class='row' id='row2'></td>
        <td>2</td>
        <td></td>
    </tr>
    <tr>
        <td>4</td>
        <td>6</td>
        <td id='annual3'>0</td>
        <td id='benefit3'><input class='row' id='row3'></td>
        <td>3</td>
        <td></td>
    </tr>
    <tr>
        <td>5</td>
        <td>7</td>
        <td id='annual4'>0</td>
        <td id='benefit4'><input class='row' id='row4'></td>
        <td>4</td>
        <td></td>
    </tr>

标签： htmljquery

解决方案

 $("input[id^=row]").on("input", function() {
        $(this).nextAll("input[id^=row]").val($(this).val());
        console.log($(this).val())
    });
 <tr>
        <th>Year</th>
        <th>Age</th>
        <th>Annual Premium<br>(Beginning of Year)</th>
        <th>Benefits<br>(End of Year)</th>
        <th>Time</th>
        <th>Policyholder's Cashflow</th>
    </tr>
    <tr>
        <td>1</td>
        <td>3</td>
        <td id='annual0'>0</td>
        <td id='benefit0'><input class='row' id='row'></td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>4</td>
        <td id='annual1'>0</td>
        <td id='benefit1'><input class='row' id='row1'></td>
        <td>1</td>
        <td></td>
    </tr>
    <tr>
        <td>3</td>
        <td>5</td>
        <td id='annual2'>0</td>
        <td id='benefit2'><input class='row' id='row2'></td>
        <td>2</td>
        <td></td>
    </tr>
    <tr>
        <td>4</td>
        <td>6</td>
        <td id='annual3'>0</td>
        <td id='benefit3'><input class='row' id='row3'></td>
        <td>3</td>
        <td></td>
    </tr>
    <tr>
        <td>5</td>
        <td>7</td>
        <td id='annual4'>0</td>
        <td id='benefit4'><input class='row' id='row4'></td>
        <td>4</td>
        <td></td>
    </tr>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

尝试on("input")代替on('change'),

推荐阅读