Question

我有四个文本框。我想能够点击它们顶部和左侧的select语句，点击它们之后，它应该显示1,1（第一个文本框）1,2（第二个文本框）2,1（第三个）文本框）2,2（第四个文本框）。有没有办法用jquery做到这一点？

$(document).ready(function() {

	$("#date1, #date2, #name1, #name2").change(function () {

	    var myRow = $("#date1").attr("col");
	    var myRow = $("#date2").attr("col");

	    var myCol = $("#name1").attr("row");
	    var myCol = $("#name2").attr("row");

	    alert(myRow + myCol);
    });
});

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<table>
<tr>
	<td></td>
	<td><select id="date1" class="allDates" col ="1"><option value="c">c</option><option value="b">b</option><option value="a">a</option></select></td>
	<td><select id="date2" class="allDates" col ="2"><option value="c">c</option><option value="b">b</option><option value="a">a</option></select></td>
</tr>
<tr>
	<td><select id="name1" class="allNames" row = "1"><option value="alex">alex</option><option value="daniel">daniel</option><option value="Joe">Joe</option>
	</select></td>
	<td><input type="text" id="divResult" readonly="readonly" ></td>
	<td><input type="text" id="divResult2" readonly="readonly" ></td>
</tr>
<tr>
	<td><select id="name2" class="allNames" row = "2">><option value="alex">alex</option><option value="daniel">daniel</option>
	</select></td>
	<td><input type="text" name="divResult" id="divResult" readonly="readonly" ></td>
	<td><input type="text" name="divResult" id="divResult" readonly="readonly" ></td>
</tr>
</table>

</div>


</body>
</html>

Answer 1

希望这是你需要的

＆＃13;

$(document).ready(function() {
    // If you want to init text before the the change, uncomment the code below
    // refreshText();	
    $("#date1, #date2, #name1, #name2").change(function () {
        refreshText();	
    });
});

function refreshText(){
    var name1 = $("#name1").val();
    var name2 = $("#name2").val();
    var date1 = $("#date1").val();
    var date2 = $("#date2").val();
    $("#divResult").val(name1+","+date1);
    $("#divResult2").val(name1+","+date2);
    $("#divResult3").val(name2+","+date1);
    $("#divResult4").val(name2+","+date2);
}

＆＃13;

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<table>
<tr>
	<td></td>
	<td><select id="date1" class="allDates" col ="1"><option value="c">c</option><option value="b">b</option><option value="a">a</option></select></td>
	<td><select id="date2" class="allDates" col ="2"><option value="c">c</option><option value="b">b</option><option value="a">a</option></select></td>
</tr>
<tr>
	<td><select id="name1" class="allNames" row = "1"><option value="alex">alex</option><option value="daniel">daniel</option><option value="Joe">Joe</option>
	</select></td>
	<td><input type="text" id="divResult" readonly="readonly" ></td>
	<td><input type="text" id="divResult2" readonly="readonly" ></td>
</tr>
<tr>
	<td><select id="name2" class="allNames" row = "2">><option value="alex">alex</option><option value="daniel">daniel</option>
	</select></td>
	<td><input type="text" name="divResult3" id="divResult3" readonly="readonly" ></td>
	<td><input type="text" name="divResult4" id="divResult4" readonly="readonly" ></td>
</tr>
</table>

</div>


</body>
</html>

＆＃13;

如何显示每个文本框的行和列？

1 个答案: