Question

对于我正在处理的应用程序，我想使用其他字段的输入自动填充字段。我的表单将包含几对输入，这导致我只能更改一个特定的输入字段。

$(function () {
        $(".master").change(function () {

            word = $(this).val();
            $(this).parents('tr').find(".slave").val(word);

        });
    });

要向表单添加额外字段，请使用以下脚本。

$(document).ready(function() {
    var max_fields      = 1000; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<tr><td><div class="form-group"><input type="text" class="master" name="or['+x+']"></div></td><td>&nbsp;</td><td><div class="form-group"><input type="text" class="slave" name="tr['+x+']"></div></td></tr>'); //add input box
        }
    });
});

这是我正在使用的形式。这是此表单中的100行之一。

<form method="POST">
    <table width="100%" class="input_fields_wrap">
        <tr>
            <td width="48%">
                <div class="form-group">
                    <select id="original" name="original" class="form-control">
                      <option value="nederlands">Nederlands</option>
                    </select> 
                </div>
            </td>
            <td width="4%"></td>
            <td width="48%">
                <div class="form-group">
                    <select id="translated" name="translated" class="form-control">
                      <option value="frans">Frans</option>
                    </select> 
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="form-group"><input type="text" class="master" name="or[0]"></div>
            </td>
            <td>&nbsp;</td>
            <td>
                <div class="form-group"><input type="text" class="slave" name="tr[0]"></div>
            </td>
        </tr>
    </table>
    <button type="submit" id="save" class="btn btn-success pull-right">Opslaan</button>
    </form>

因此，为了清楚起见，我想根据同一行中输入的值更改“转换”输入的值。由于我的表单包含很多行，我不知道如何根据同一表格行中的输入更改该特定输入。提前谢谢！

Answer 1

在这里，我不得不取出ajax电话，但如果你需要帮助，请将其添加回来告诉我。

我通过使用类而不是id来改变你的html，这是相关的js。

$(function () {
    $("table").on('change', '.master', function () {

        word = $(this).val();
        $(this).parents('tr').find(".slave").val(word);

    });
});

https://jsfiddle.net/6LaLm33t/4/

Answer 2

您可以做的是获取父级，然后找到该父级的#translation。原创和翻译应该是课程。 var word =＆＃39;＆＃39 ;; $（function（）{ $（＆＃34; .original＆＃34;）。change（function（）{ word = $（this）.val（）; var arr; $ .ajax（{type：＆＃34; POST＆＃34;，async：false，url：＆＃39; wordsuggestion＆＃39; + word，success：function（data）{ arr =数据; $（本）。家长（＆＃39; TR＆＃39）。发现（＆＃34; .translation＆＃34）。VAL（ARR）; }}）; }）; }）;

Answer 3

如果您不想（或因某些原因不能）更改HTML（无论如何，如果有多个ID，您将不得不这样做！），这是获得所需结果的方法之一：

$('table tr td:first-child input').on("keyup", function() {

$(this).closest('tr').find('td:last-child input').val($(this).val());
});

因此，如果行中有3个单元格（td），则第一个选择器将“抓取”第一个输入，第二个选择器将在同一行中找到最后一个/第二个输入。

$('table tr td:first-child input').on("keyup", function() { //or desired event...change...input..

$(this).closest('tr').find('td:last-child input').val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>
                <div class="form-group"><div class="ui-widget"><input type="text" id="original" class="form-control" name="or[0]"></div></div>
            </td>
            <td>&nbsp;</td>
            <td>
                <div class="form-group"><input type="text" id="translation" class="form-control tags" name="tr[0]"></div>
            </td>
        </tr>
<tr><td>
                <div class="form-group"><div class="ui-widget"><input type="text" id="original" class="form-control" name="or[0]"></div></div>
            </td>
            <td>&nbsp;</td>
            <td>
                <div class="form-group"><input type="text" id="translation1" class="form-control tags" name="tr[0]"></div>
            </td>
        </tr>
<tr><td>
                <div class="form-group"><div class="ui-widget"><input type="text" id="original1" class="form-control" name="or[0]"></div></div>
            </td>
            <td>&nbsp;</td>
            <td>
                <div class="form-group"><input type="text" id="translation2" class="form-control tags" name="tr[0]"></div>
            </td>
        </tr>        
        
        
</table>

更改输入对javascript的值

3 个答案: