我有以下代码,它是Java servlet,html,javascript / jQuery web应用程序的一部分。
<Table border=1>
<Tr>
<Td><button id=Current_1 type=button></button></Td>
<Td><button id=Current_2 type=button></button></Td>
<Td><button id=Current_3 type=button></button></Td>
<Td><button id=Current_4 type=button></button></Td>
<Td><button id=Current_5 type=button></button></Td>
<Td><button id=Current_6 type=button></button></Td>
</Tr>
</Table>
我可以在Java servlet端做什么来获取每个按钮中的所有文本,我在考虑点击时有另一个提交按钮,一些jQuery获取所有这些按钮并循环通过它们来获取每个按钮的文字。
这些按钮中的文本最初没有任何内容,但在应用程序中用户可以单击并更改值,所以最后我需要为用户提供一种方法来保存这些按钮上的内容并将它们传递给servlet,&# 39;是实现这一目标的最佳方式,任何示例代码?但我最需要帮助的是如何抓住按钮并循环通过它们来获取文本?
编辑:也许我没有表达清楚。
If Button_1 has text "B1"
Button_2 has text "B2"
...
Button_6 has text "B6"
用户点击另一个提交按钮后我期望的结果是:B1B2B3B4B5B6
答案 0 :(得分:3)
使用jQuery创建对象数组非常简单
var buttonData = $('button[id^="Current"]').map(function(){
return {id: this.id, text: $(this).text()};
}).get();
产地:
[
{id:"Current_1", text: "Button #1 Text"},
{id:"Current_2", text: "Button #2 Text"},
....
{id:"Current_6", text: "Button #6 Text"}
]
类选择器可能更清晰,或者从行
上的选择器中定位它们编辑:如果您想要的只是组合文本而没有分隔符,您实际上可以获得整个文本集合,甚至不需要循环元素。
$('button[id^="Current"]').text();
对于jQuery中的大多数值getter,这种方法只返回第一个元素的含义,但是text()
它返回所有
答案 1 :(得分:1)
正如您所提到的,您可以使用另一个按钮来获取每个按钮的文本。只需使用一个公共类并循环它们
$(document).ready(function(){
$("#Current_7").click(function(){
$(".myButton").each(function(){
console.log($(this).text())
})
})
})
答案 2 :(得分:1)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('button[id^="Current"]').each(function(){
console.info($(this).attr('id') + '----' + $(this).text())
});
});
</script>
</head>
<body>
<Table border=1>
<Tr>
<Td><button id=Current_1 type=button>button_1</button></Td>
<Td><button id=Current_2 type=button>button_2</button></Td>
<Td><button id=Current_3 type=button>button_3</button></Td>
<Td><button id=Current_4 type=button>button_4</button></Td>
<Td><button id=Current_5 type=button>button_5</button></Td>
<Td><button id=Current_6 type=button>button_6</button></Td>
</Tr>
</Table>
</body>
</html>