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. =)
InformationsquelleAutor radi8 | 2012-04-13