"TypeError:$(...)。onは関数ではありません"
私はjquery関数を使用して、チェックされたチェックボックス行にある値のセットをグループ化しました。 checkedRows配列に存在する値がコンソールに表示されず、エラーが表示されます。チェックボックスのチェック値の行の値を印刷してください。
これは
<script>
$('#btn').on('click', function() {
var checkedRows = [];
$(':checkbox:checked').closest('tr').each(function() {
checkedRows.push(
$(this).find('td:gt(0)').map(function() {
return $(this).html();
}).get()
);
});
console.log(checkedRows);
});
</script>
私のJSPページに私のjqueryの関数であるJSP
あなたが使用されているのjQueryのバージョン<%@page import="java.util.List"%>
<%@page import="web.Products"%>
<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script>
$('#btn').on('click', function() {
var checkedRows = [];
$(':checkbox:checked').closest('tr').each(function() {
checkedRows.push(
$(this).find('td:gt(0)').map(function() {
return $(this).html();
}).get()
);
});
console.log(checkedRows);
});
</script>
</head>
<form name="sform" method="post" action="Save_Products">
<table style="width:40%">
<tr> <th> Brand Name</th>
<th> Product Name</th>
<th> Description</th>
</tr>
<tr>
<td><%
List<Products> pdts = (List<Products>) request.getAttribute("productlist");
if(pdts!=null){
for(Products prod: pdts){
out.println("<input type=\"hidden\" name=\"brand_name\" value=\"" + prod.getBrandname() + "\">");
out.println("<br/>"+prod.getBrandname());
} %> </td>
<td><%
if(pdts!=null){
for(Products prod: pdts){
out.println("<input type=\"checkbox\" name=\"prod\" checked=\"checked\" value=\"" + prod.getProductname() + "\">" + prod.getProductname()+"<br>");
} } %> </td>
<td><%
if(pdts!=null){
for(Products prod: pdts){
out.println("<input type=\"text\" name=\"desc\" style=\"width:50px; height:22px\" value=\""+prod.getDesc()+"\"/><br/>");
}
}
} %> </td>
</tr>
<br/>
<br/>
<tr>
<td></td>
<td align="center"> <input id="btn" type="submit" value="Save" name="save"/> </td></tr>
</table>
</form>
</html>
クリックスコープ/グローバルの外でcheckedRowsを定義しようとしましたか? – Chay22
jqueryの古いバージョンを使用しているので、 'on'の代わりに 'live'関数を使用してください。エラーは修正されますが、チェックされたチェックボックスの行の値はブラウザのコンソールに表示されません – sound