Select row and bring the values

Question

Select row and bring the values

Navigation

#1 by (2 votes)

2

I have this table

function highlight(e) {
    if (selected[0]) selected[0].className = '';
    e.target.parentNode.className = 'selected';
    
}

var table = document.getElementById('table'),
    selected = table.getElementsByClassName('selected');
table.onclick = highlight;

function fnselect(){
var $row=$(this).parent().find('td');
    var clickeedID=$row.eq(0).text();
   // alert(clickeedID);
}

$("#tst").click(function(){
    var value =$(".selected td:first").html();
    value = value || "No row Selected";
    alert(value);
});

.selected {
    background-color: brown;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
    <tr>
        <td>1 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>    
        <td>Klik pre detaily</td>
         <td><select name="sel" id="sel" >
             <option value="1">Seleccion</option>
             <option value="2">123</option>
             <option value="3">456</option>
         </select>
         </td>
    </tr>
    <tr>
        <td>2 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
        <td><select name="" id="hola">
             <option value="1">Seleccion</option>
             <option value="2">123</option>
             <option value="3">456</option>
         </select>
         </td>
    </tr>
    <tr>
        <td>3 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
        <td><select name="" id="hola">
             <option value="1">Seleccion</option>
             <option value="2">123</option>
             <option value="3">456</option>
         </select>
         </td>
    </tr>
</table>
<input type="button" id="tst" value="OK" onclick="fnselect()" />

When I click the button OK brings me only the first value of the selected table. I'm trying to make him bring me all the values including the value of the select.

For example so that it does not bring me all the data of the select which are 123 and 456 show me only the selected one. and not the 2 values

javascript jquery

asked by Eduard 18.07.2017 в 16:30

source

1 answer

Problem with Procedure and Case Specify language with MYSql - STR_TO_DATE

score 2 · Accepted Answer

In the Jquery selector you are stipulating that you take the first td only ...

var value =$(".selected td:first").html();

So you should remove that and change the html for a text

var value =$(".selected").text();

But for you to catch the selected dropmenu you can not take the whole line and now. You must iterate all the td with the function each() and concatenate your text() until you find a td that has a select

Then take the option that is selected and hence your text .

$(".selected").find("td").each(function() {
    if ($(this).has("select").length) { //el td contiene un select

        value += ($(this).find("option:selected").text());

    }else {
        value += $(this).text() + "\n";
    }
});

function highlight(e) {
  if (selected[0]) selected[0].className = '';
  e.target.parentNode.className = 'selected';

}

var table = document.getElementById('table'),
  selected = table.getElementsByClassName('selected');
table.onclick = highlight;

function fnselect() {
  var $row = $(this).parent().find('td');
  var clickeedID = $row.eq(0).text();
  // alert(clickeedID);
}

$("#tst").click(function() {
  var value = "";
  $(".selected").find("td").each(function() {
    if ($(this).has("select").length) {

      value += ($(this).find("option:selected").text());
    } else {
      value += $(this).text() + "\n";
      //alert($(this).text());
    }
  });
  value = value || "No row Selected";
  alert(value);
});

.selected {
    background-color: brown;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
    <tr>
        <td>1 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>    
        <td>Klik pre detaily</td>
         <td><select name="sel" id="sel" >
             <option value="1">Seleccion</option>
             <option value="2">123</option>
             <option value="3">456</option>
         </select>
         </td>
    </tr>
    <tr>
        <td>2 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
        <td><select name="" id="hola">
             <option value="1">Seleccion</option>
             <option value="2">123</option>
             <option value="3">456</option>
         </select>
         </td>
    </tr>
    <tr>
        <td>3 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
        <td><select name="" id="hola">
             <option value="1">Seleccion</option>
             <option value="2">123</option>
             <option value="3">456</option>
         </select>
         </td>
    </tr>
</table>
<input type="button" id="tst" value="OK" onclick="fnselect()" />