Question

我正在尝试完成这个jquery函数。目标是输入单个值并在每个表格单元格中返回正确的百分比。我有它工作，以便它填充第一个单元格，但我希望类是完全相同的，并有一个输入填充每个单元格与输入的百分比。

    *{
        margin: 0;
    }

    body {}

        #container {}
            header {
                background: #ADD8E6;
                width: 100vw;
                height: 100vh;
            }

    #one{ 
    }

Answer 1

试试这个，

＆＃13;

$(document).ready(function () {
    $('input').keyup(function () {
        cal(this);
    });
});

function cal(obj) {
    var cal1, perc1, result;
    cal1 = parseFloat(obj.value);
	$.each($(".perc"),function(key,val){
		var perc1, result;
		perc1 = parseFloat($(val).text());
		result = (cal1*perc1)/100;
		$($('.weight')[key]).html(result);
	});
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input class="max1" />
<table>
    <tr>
        <td colspan="5">Deadlift</td>
    </tr>
    <tr>
        <td align="center">
            <span  class="perc">75</span>% x 3</td>
        <td align="center">
            <span class="perc">78</span>% x 2</td>
        <td align="center">
            <span class="perc">83</span>% x 1</td>
        <td align="center">
            <span class="perc">85</span>% x 1</td>
    </tr>
    <tr>
        <td class="weight"></td>
        <td class="weight"></td>
        <td class="weight"></td>
        <td class="weight"></td>
    </tr>
</table>

＆＃13;

这也可以扩展到多个表（根据您的要求）。有很多方法可以做到这一点。我并不完全了解您的要求和DOM结构。但是如果每个表只是在输入元素之后，那么您可以使用以下解决方案。如果不是，则必须为输入和相关表分配特定的类。

＆＃13;

$(document).ready(function () {
    $('input').keyup(function () {		
        cal(this,$(this).next());
    });
});

function cal(obj,tableObj) {
    var cal1, perc1, result;
    cal1 = parseFloat(obj.value);
	$.each($(tableObj).find(".perc"),function(key,val){
		var perc1, result;
		perc1 = parseFloat($(val).text());
		result = (cal1*perc1)/100;
		$($(tableObj).find('.weight')[key]).html(result);
	});
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input class="max1" />
<table>
    <tr>
        <td colspan="5">Deadlift</td>
    </tr>
    <tr>
        <td align="center">
            <span  class="perc">75</span>% x 3</td>
        <td align="center">
            <span class="perc">78</span>% x 2</td>
        <td align="center">
            <span class="perc">83</span>% x 1</td>
        <td align="center">
            <span class="perc">85</span>% x 1</td>
    </tr>
    <tr>
        <td class="weight"></td>
        <td class="weight"></td>
        <td class="weight"></td>
        <td class="weight"></td>
    </tr>
</table>
.......................................................................<br/>
<input class="max1" />
<table>
    <tr>
        <td colspan="5">Deadlift</td>
    </tr>
    <tr>
        <td align="center">
            <span  class="perc">75</span>% x 3</td>
        <td align="center">
            <span class="perc">78</span>% x 2</td>
        <td align="center">
            <span class="perc">83</span>% x 1</td>
        <td align="center">
            <span class="perc">85</span>% x 1</td>
    </tr>
    <tr>
        <td class="weight"></td>
        <td class="weight"></td>
        <td class="weight"></td>
        <td class="weight"></td>
    </tr>
</table>
.......................................................................<br/>
<input class="max1" />
<table>
    <tr>
        <td colspan="5">Deadlift</td>
    </tr>
    <tr>
        <td align="center">
            <span  class="perc">75</span>% x 3</td>
        <td align="center">
            <span class="perc">78</span>% x 2</td>
        <td align="center">
            <span class="perc">83</span>% x 1</td>
        <td align="center">
            <span class="perc">85</span>% x 1</td>
    </tr>
    <tr>
        <td class="weight"></td>
        <td class="weight"></td>
        <td class="weight"></td>
        <td class="weight"></td>
    </tr>
</table>

＆＃13;

Answer 2

根据你的描述，我认为你需要一个简单的$.each来迭代所有td span并设置你的输入百分比。

$('table').find('tr:not(:first)').find('td').each(function() {
   $this = $(this);
   $this.find("span.perc").html('your value');
});

在多个类上迭代jquery函数

2 个答案: