How to choose only one row at a time in html table using javascript

Question

I want to choose only one row at a time from html table... Im using php,html and javascript.. if i choose one row means that the value only show in alert box at a time using javascript.. I wrote some js coding but it shows all the row values one by one in alertbox.. Please anyone help for me..

My html code:

<table BORDER="5">
                    <tr>
                        <th colspan="10">
                           
                            
                        </th>
                    </tr>
                    <tr>
                        <th>Date & Time</th>
                        <th>Name</th>
                        <th>Source</th>
                        <th>Destination</th>
                        <th>Ride Type</th>
                        <th>Vehicle Type</th>
                        <th>Plate No.</th>
                        <th>Distance</th>
               </tr>
                     <?php $search_data = "";?>
                    <tbody id="table"style="cursor:pointer"onclick="found(this);">
                    <tr id="choose">
                    
                            <?php echo $search_data; ?>
                            
                            </tr>
                    </tbody>
                      
                </table>

My javascript:

function found(row) {
    	//alert("hai");
    	var table=document.getElementById("table");
     var cells = table.getElementsByTagName("tr");
     for (var i = 0; i < cells.length; i++) {
     alert(cells[i].innerHTML);
}
    	
    }

My php code: while ($data = mysql_fetch_array($firstattempt)) {

        $search_data = "";
       $search_data .= "<tr>";
            $search_data .= "<td>{$data["DATE"]} & {$data["START_TIME"]}</td>";
            $search_data .= "<td>{$data["NAME"]}</td>";             
            $search_data .= "<td>{$data["START_FROM"]}</td>";
            $search_data .= "<td>{$data["END_TO"]}</td>";
            $search_data .= "<td>{$data["RIDER_FLAG"]}</td>";
            $search_data .= "<td>{$data["VEHICLE_TYPE"]}</td>";
            $search_data .= "<td>{$data["PLATE_NO"]}</td>";
            $search_data .= "<td>{$distance} Km</td>";

            $search_data .= "</tr>";
            echo $search_data;

  }

My output : output

this will solve your problem stackoverflow.com/questions/14044257/… just init your table on window load — Ayyanar G
– Ayyanar G, Commented Apr 23, 2015 at 12:51

Davy · Accepted Answer · 2015-04-23 12:40:20Z

0

function found(row) {
    	//alert("hai");
    	var table=document.getElementById("table");
     var cells = table.getElementsByTagName("tr");
     for (var i = 0; i < cells.length; i++) {
     alert(cells[i].innerHTML);
}
    	
    }

The for loop is what's showing all the tr's 1 by 1. If you want to only alert 1, remove the for loop and just use the alert sentence, and place a number instead of an i

alert(cells[0].innerHTML);

Would show the first element for example.

answered Apr 23, 2015 at 12:40

Davy

7311 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

appu Over a year ago

i had confuse, could you alter my code send.. Please

Bo Chen · Accepted Answer · 2015-04-23 12:55:56Z

0

try below js:

function fount(row) {
    var tr = row.getElementsByTagName('tr');

    for (var i = 0; i< tr.length; i++) {
        tr[i].onclick = function() {
            alert(this.innerHTML);
        }
    }
}

answered Apr 23, 2015 at 12:55

Bo Chen

4362 silver badges6 bronze badges

2 Comments

appu Over a year ago

how to add yes/no button in this alertbox

Bo Chen Over a year ago

change alert to confirm

Collectives™ on Stack Overflow

How to choose only one row at a time in html table using javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related