JQuery - obtention de valeurs à partir de la sélection de ligne de table
J'ai une table avec plusieurs éléments. Le premier élément est une case à cocher qui va déclencher un événement dans le Javascript. ce que j'ai à faire est:
1. vérifiez si la case à cocher valeur est true
2. si la valeur est true, obtenir les valeurs des éléments du tableau
un. certaines valeurs de la colonne de texte
b. certaines colonnes contiennent des zones de texte (
<table class="rowClick" id="page" width="100%">
<thead>
<tr id="p_1">
<th colspan=9 align=center >Select/Change and Update Selections</th>
</tr>
<tr id="p_2">
<th>Select</th>
<th class="table-sortable:default">Class</th>
<th class="table-sortable:default">Desc</th>
<th class="table-sortable:default">Weight</th>
<th class="table-sortable:currency">Pott Dia</th>
<th class="table-sortable:currency">Pott Ht</th>
<th class="table-sortable:currency">Pott Stack Ht</th>
<th class="table-sortable:currency">Tower Width</th>
</tr>
</thead>
<tbody>
<tr id="p_3">
<td align=center>
<input class = "prodSel" type="checkbox" id="chk[]"></td>
<td align=center>00100</td>
<td align=center>C100</td>
<td align=center>XL</td>
<td align=center><input size=5 type="text" value=4.75></td>
<td align=center><input size=5 type="text" value=4.68></td>
<td align=center><input size=5 type="text" value=0.33></td>
<td align=center><input size=5 type="text" value=40.40></td>
</tr>
<tr id="p_4">
<td align=center><input class = "prodSel" type="checkbox" id="chk[]"></td>
<td align=center>00140</td>
<td align=center>C200S</td>
<td align=center>CL</td>
<td align=center><input size=5 type="text" value=6.00></td>
<td align=center><input size=5 type="text" value=5.43></td>
<td align=center><input size=5 type="text" value=0.43></td>
<td align=center><input size=5 type="text" value=42.00></td>
</tr>
<tr id="p_5">
<td align=center><input class = "prodSel" type="checkbox" id="chk[]"></td>
<td align=center>00140</td>
<td align=center>C200S</td>
<td align=center>CU</td>
<td align=center><input size=5 type="text" value=6.00></td>
<td align=center><input size=5 type="text" value=5.43></td>
<td align=center><input size=5 type="text" value=0.43></td>
<td align=center><input size=5 type="text" value=42.00></td>
</tr>
</tbody>
</table>
Actuellement, j'ai le texte suivant:
rowSelect: function(event) {
var work = [];
// var rowIndex = $(this).parent().parent().children().index($(this).parent());
var chkbox = $(this).closest('tr').find('td:eq(0)').child(0);
if(null != chkbox && true == chkbox.checked){
for(var i=0;i<17;i++){
if(i<3){
var s = $(this).closest('tr').find('td:eq(i)').text();
}
else{
var s = $(this).closest('tr').find('td:eq(i)').val();
}
work[i]=s;
}
}
}
Le problème est au tout début où j'essaie d'obtenir la valeur de la case (cochée ou non). J'ai pensé que je pouvais soit saisir l'objet, puis vérifier le val(), ou tout simplement obtenir le val() de l'enfant, mais rien n'est encore. J'ai besoin d'un moyen pour obtenir la valeur de la case et également obtenir la valeur de la zones d'entrée de texte.
J'ai un violon, ici, avec la solution: http://jsfiddle.net/radi8/tCh3P/19/
----> SOLUTION <----
Ok, voici ma solution finale à l'aide de la fonctionnalité fournie ci-dessous et quelques autres soigné attributs pour quelqu'un qui se soucie d'avoir un coup d'oeil. Je l'ai changé pour remplir un JSON plutôt que d'utiliser des tableaux, mais la fonctionnalité de l'ensemble est valide.
var proddta =
{
init: function(){
//hook into the get delete/update buttons
var del = $("#delete");
for (var i = 0, ii = del.length; i < ii; i++){
$(del).bind("click", proddta.deleteListener2);
}
var upd = $("#update");
for (var i = 0, ii = upd.length; i < ii; i++){
$(upd).bind("click", proddta.updateListener);
}
},
updateListener: function(event){
myJSON = new Object();
$('.prodSel:checked').each(function() {
proddta.getArrays(this, myJSON);
var dataString = JSON.stringify(myJSON);
alert('dastring: '+dataString);
/*
var url = 'http://'+window.location.hostname+'/truck/webServices/products.svc.php?update=1';
$.post(url, {data: dataString}, function(res){
proddta.showResult(res);
});
*/
});
},
deleteListener2: function(event){
myJSON = new Object();
$('.prodSel:checked').each(function(){
proddta.getArrays(this, myJSON);
var dataString = JSON.stringify(myJSON);
/*
var url = 'http://'+window.location.hostname+'/truck/webServices/products.svc.php?update=0';
$.post(url, {data: dataString}, function(res){
var obj = $.evalJSON(res);
if(obj.somebool === true)
$("#result").html(obj.hello + ' ' + obj.array[1] + obj.worked + ". Message from PHP: "+obj.php_message);
});
*/
alert('dastring: '+dataString);
});
},
getArrays: function(evt, myjson){
var val = proddta.getColumnCount(this);
$closestTr = $(evt).closest('tr');
var chkbox = $closestTr.find('td:eq(0)').find(':checkbox');
if (null !== chkbox && true === chkbox.is(':checked')) {
var s = '';
var id = '';
for (var i = 1; i < val; i++) {
if (i >= 1 && i < 4) {
s = $closestTr.find('td:eq(' + i + ')').text();
id = $closestTr.find('td:eq(' + i + ')').attr('id');
} else {
s = $closestTr.find('td:eq(' + i + ')').find(':input').val();
id = $closestTr.find('td:eq(' + i + ')').find(':input').attr('id');
}
myjson[id] = s;
}
}
else {
//handle this exception...
}
},
getColumnCount: function(evt){
var colCount = 0;
$('tr:nth-child(1) td').each(function () {
if ($(this).attr('colspan')) {
colCount += +$(this).attr('colspan');
} else {
colCount++;
}
});
alert(colCount);
return colCount;
},
}
proddta.init();
- S'il vous plaît montrer votre code HTML. Je soupçonne qu'il y a de plus facile sélecteurs pour trouver les différents éléments que vous utilisez.
- (voir violon) Merci pour l'aperçu... des suggestions?
- Je ne vois pas l'ajout de valeur="" attribut de cases à cocher.e.g
<input class = "prodSel" type="checkbox" id="chk[]">
- Veuillez mettre à jour votre post pour poser une seule question par l'lignes directrices.
- De même, si vous avez mis en œuvre votre propre solution (et qui est à la fois de la "liberté" et génial), ne pas caresser la réponse dans la question elle-même, l'ajouter ajouter une réponse, et d'accepter cette réponse. De cette façon, la question devient officiellement, et de façon définitive, répondu. De Plus, les gens peuvent alors upvote votre réponse, et vous donner rep. =)
Vous devez vous connecter pour publier un commentaire.
Pour trouver la case à cocher:
Références:
case
sélecteur.:checked
sélecteur.find()
.:premier
sélecteur.est()
.$(this)
dans son code, TD et peut être n'importe quelle colonne. N'a pas besoin d'être la colonne avec case.closest()
appel. Tant qu'il n'est pas une réponse, la question semble être: "comment puis-je savoir si la case est cochée?' Je me rends compte qu'il demande pour la valeur, mais il n'y a pas de valeur d'attribut pour les cases à cocher, et il apparaît, dans le code, être à la recherche pour "si elle est cochée," non", quelle valeur est-il."Votre code d'un tas de bugs et enfin il a travaillé. Voir ci-dessous,
DÉMO
Changer votre
chkbox
déclaration de variable à ceci: