Question

我有下表。如何填写其中一列并单击列名称旁边的图标 - 其他列将自动填入相同的值。

例如，如果第一列的字段具有以下值：姓名 - 约翰电子邮件 - johnson@gmail.com 电话 - 123456 国家 - 美国

表的其他列将由相同的值填充。或者，如果第二列中的第二列具有某个值 - 在点击时填充具有相同值的其他列。

     <table class="table table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th>First <i class="glyphicon glyphicon-edit"></i></th>
                    <th>Second <i class="glyphicon glyphicon-edit"></i></th>
                    <th>Thired <i class="glyphicon glyphicon-edit"></i></th>
                    <th>Fourth <i class="glyphicon glyphicon-edit"></i></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Name</td>
                    <td><input id="first-name" class="form-control"></input></td>
                    <td><input id="second-name" class="form-control"></input></td>
                    <td><input id="third-name" class="form-control"></input></td>
                    <td><input id="fourth-name" class="form-control"></input></td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td><input id="first-email" class="form-control"></input></td>
                    <td><input id="second-email" class="form-control"></input></td>
                    <td><input id="third-email" class="form-control"></input></td>
                    <td><input id="fourth-email" class="form-control"></input></td>
                </tr>
                <tr>
                    <td>Phone</td>
                    <td><input id="first-phone" class="form-control"></input></td>
                    <td><input id="second-phone" class="form-control"></input></td>
                    <td><input id="third-phone" class="form-control"></input></td>
                    <td><input id="fourth-phone" class="form-control"></input></td>
                </tr>
                <tr>
                    <td>Country</td>
                    <td>
                        <select id="first-country" class="form-control">
                            <option>ITALY</option>
                            <option>FRANCE</option>
                            <option>UKRAINE</option>
                            <option>USA</option>
                        </select>
                    </td>
                    <td>
                        <select id="second-country" class="form-control">
                            <option>ITALY</option>
                            <option>FRANCE</option>
                            <option>UKRAINE</option>
                            <option>USA</option>
                        </select>
                    </td>
                    <td>
                        <select id="third-country" class="form-control">
                            <option>ITALY</option>
                            <option>FRANCE</option>
                            <option>UKRAINE</option>
                            <option>USA</option>
                        </select>
                    </td>
                    <td>
                        <select id="fourth-country" class="form-control">
                            <option>ITALY</option>
                            <option>FRANCE</option>
                            <option>UKRAINE</option>
                            <option>USA</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>

Answer 1

你可以尝试

$("th i ").click(function () {
  var index = $(this).parent().index();
  $("tr").each(function () {
    $(this).find("input").val($(this).find("td:eq(" + index + ") input").val());
    $(this).find("select").val($(this).find("td:eq(" + index + ") select").val())
  })
})

Demo

略有改进的版本：

$("th i ").click(function () {
  var index = $(this).parent().index();
  $("tr").each(function () {
    var val;
    if ($(this).find("input").length) {
        val = $(this).find("td:eq(" + index + ") input").val();
        $(this).find("input").val(val);
    } else {
        val = $(this).find("td:eq(" + index + ") select").val()
        $(this).find("select").val(val);
    }
  })
})

jQuery自动填充表中的输入

1 个答案: