从TD获取价值

Question

I print results from db. I am facing problem when I want to choose value from row. I was trying to pick up the value by entering button (last column) on value, and insert that value in local storage.

<table class="table table-bordered">
    <thead>
        <tr class="bg-grey">
            <th>Broj </th>
            <th>Boja </th>
            <th>Količina</th>
            <th><center><i class="icon-cart"></i></center></th>
        </tr>
    </thead>
    <tbody>
    <?php  
        while ($r=$m->fetch()) {
            $id_print = $r['id']; 
            $boja = $r['Boja'];
            $kolicina = $r['Kolicina'];
            //  var_dump($id_print);
            ?>
        <tr>
            <td><?php echo "R - " . $id_print;?></td>
            <td><?php echo $boja;?></td>
            <td><?php echo $kolicina;?></td>
            <td><button  id= "item" value='<?php echo $id_print;?>' onclick="save()" class="ion-ios-cart-outline"></button></td>
        </tr>
        <?php  }  ?>    
    </tbody>
</table>

I am using function to get value from td. But I always get empty var.

<script type="text/javascript">
    function save() {
        var items= document.getElementById('item').innerHTML;           

        localStorage.setItem('action', items);
    }
</script>

I am not doing something good, If someone can tell me what to change in order to get results.

Answer 1

If your goal is to save the value of the button that was clicked, you don't need any id s at all.

The minimum-changes approach is to pass this into your handler as an argument, and then use the argument's value property in the handler's code:

<td><button value='<?php echo $id_print;?>' onclick="save(this)" class="ion-ios-cart-outline"></button></td>
<!-- Note ------------------------------------------------^^^^^  -->

then

function save(element) {
    localStorage.setItem('action', element.value);
}

You might also consider adding type="button" to your button elements, since the default type of button s is (to me, surprisingly) type="submit" , so if you have those buttons in a form, they'll submit the form.

Re your comment:

That is exactly what I was looking for, but in table I have more rows and more could be selected. By doing this only one value is possible to select. Is it possible so save values in local storage by clicking on them

If you mean as an array, yes, you can do that. Here's one way:

function save(element) {
    var actions = JSON.parse(localStorage.getItem("actions") || "[]");
    if (actions.findIndex(element.value) == -1) {
        actions.push(element.value);
        localStorage.setItem("actions", JSON.stringify(actions));
    }
}

That maintains an array in local storage as JSON (since all local storage values are strings). The first part gets the existing array (if any) or a blank one (if none):

var actions = JSON.parse(localStorage.getItem("actions") || "[]");

Then we use the ES2015 (aka "ES6") function Array#findIndex (which can be polyfilled/shimmmed, see MDN ) to see if the value is already in the array and, if not, we add it:

if (actions.findIndex(element.value) == -1) {
    actions.push(element.value);
    localStorage.setItem("actions", JSON.stringify(actions));
}

If for any reason you don't want to shim/polyfill Array#findIndex , you can use the ES5 function Array#some instead:

if (!actions.some(function(e) { return e === element.value; })) {
    actions.push(element.value);
    localStorage.setItem("actions", JSON.stringify(actions));
}