Codeigniter get the value of a <td> element onclick

Question

I am trying to get table data when the user clicks on the text inside element. I have tried number of java script but I cant get the value to be send back to the controller for further processing. I would really appreciate if you can help me out. I have added necessary code for you to see if I am doing something wrong.

<div class="box-content">
                          <table id="suppliertable" class="table table-striped table-bordered bootstrap-datatable datatable">
                      <thead>
                          <tr>
                              <th>Supplier</th>
                              <th>Open Range</th>
                              <th>Fill Content</th>
                              <th>Total Match</th>
                          </tr>
                      </thead>   
                      <tbody>

                      <?php foreach($present_all_suppliers as $v): ?>
                              <tr>      
                                    <td class="center" style="color:#0c595b;"><?php echo $v->supplierCompany;?> </a> </td>
                                    <td class="center">70%</td>
                                    <td class="center">12%</td>
                                    <td class="center">82%</td>
                            </tr>
                    <?php endforeach; ?>


                    </tbody>
                  </table>            
                </div>

Java Script:

document.getElementById ( "tdid" ).textContent
var tdElem = document.getElementById ( "tdid" );
var tdText = tdElem.innerText | tdElem.textContent;

Answer 1

You need to pass the data back to the controller from Javascript. That means that when the user clicks on the <td> in question an AJAX request must be sent to the appropriate controller and the controller can then execute some server action or return some data that would be used by the AJAX callback function.

Here is an example: http://www.w3schools.com/php/php_ajax_php.asp

This shows how to use AJAX and PHP to make dynamic changes to the HTML DOM objects.

Here is another question on stackoverflow about onclick and AJAX and PHP: Call a PHP function after onClick HTML event

What you need to learn is AJAX and how to build your application to use it if you want to make the page look and feel more modern (HTML5).

Answer 2

This is going to require some fancy ajax and a javascript enclosure. Hopefully this example will help.

http://jsfiddle.net/qpe2wrmt/1/

function addEventHandler(elem,eventType,handler){
    if (elem.addEventListener)
        elem.addEventListener(eventType,handler,false);
    else if (elem.attachEvent)
        elem.attachEvent ('on'+eventType,handler);
}

var items = document.getElementsByClassName("clickable");
i = items.length;
while(i--){
    (function(item){
        addEventHandler(item,"click",function(){
            // make your ajax call here
            window.alert("clicked on a thing: "+item.innerHTML);
        });
    })(items[i]);
}

1) Add a 'clickable' class to each td you want to be cliackable

2) Loop through all clickable items by classname and assign an event handler to each.

3) Make an XHR request when clicked on.