CODEWITHSUNDEEP
javascripthtml
harp
harp

Reputation: 129

Can't set HTML field from JS variable?

Trying to click on an HTML cell and grab that cell's html data, stick it into a form field to be used in a latter process. I can set this fields value to anything I want if I code it directly like: blah = 99; however if I change that hard value to a variable or to the cell contents it doesn't work. I can alert it all day long, I just cannot for the life of me get the value to go to the form field. What am I missing?

var tbl = document.getElementById("tblMain");
if (tbl != null) {
    for (var i = 0; i < tbl.rows.length; i++) {
        for (var j = 0; j < tbl.rows[i].cells.length; j++)
            tbl.rows[i].cells[j].onclick = function () {
                getval(this);
            };
    }
}

function getval(cel) {
    var theTarget;
    theTarget = cel.innerHTML;
    document.getElementById("status").value = cel.innerHTML;
}

 
<center>
  Click on below table cell to find its value.
  <br />
</center>
<table align="center" id="tblMain" border="1" style="cursor: pointer;">
  <tr>
    <td>
      R1C1
    </td>
    <td>
      R1C2
    </td>
    <td>
      R1C3
    </td>
    <td>
      R1C4
    </td>
  </tr>
</table><br><br>
<p align="center"><input name="status" type="text" id="status" style="color: #000; border: #000 1px solid;" size="5">
</p>

Upvotes: 1

Views: 56

Answers (2)

Ram Segev
Ram Segev

Reputation: 2571

You can use regular expression to remove spaces before and after the string cel.innerHTML.replace(/^\s+|\s+$/g,''); , this will be supported in dinosaur browser that don't support trim()

var tbl = document.getElementById("tblMain");
            if (tbl != null) {
                for (var i = 0; i < tbl.rows.length; i++) {
                    for (var j = 0; j < tbl.rows[i].cells.length; j++)
                        tbl.rows[i].cells[j].onclick = function () { getval(this); };
                }
            }
            function getval(cel) {
    			var theTarget;
    			theTarget = cel.innerHTML;
    			document.getElementById("status").value = cel.innerHTML.replace(/\s/g, "");
            }
<center>
            Click on below table cell to find its value.
            <br />
        </center>
        <table align="center" id="tblMain" border="1" style="cursor: pointer;">
            <tr>
                <td>
                    R1C1
                </td>
                <td>
                    R1C2
                </td>
                <td>
                    R1C3
                </td>
                <td>
                    R1C4
                </td>
            </tr>
        </table><br><br>
        <p align="center"><input name="status" type="text" id="status" style="color: #000; border: #000 1px solid;" size="5">
    </p>

Upvotes: 1

Dmitry
Dmitry

Reputation: 7266

It works. It's just that the innerHTML has too much white space around the actual text. Use trim() to get rid of it.

 <html>
<head>
    <title>Find table cell value on cell (table) click using JavaScript</title> 
    </head>
<body>
    <center>
        Click on below table cell to find its value.
        <br />
    </center>
    <table align="center" id="tblMain" border="1" style="cursor: pointer;">
        <tr>
            <td>
                R1C1
            </td>
            <td>
                R1C2
            </td>
            <td>
                R1C3
            </td>
            <td>
                R1C4
            </td>
        </tr>
    </table><br><br>
    <p align="center"><input name="status" type="text" id="status" style="color: #000; border: #000 1px solid;" size="5">
</p>
<script language="javascript">
        var tbl = document.getElementById("tblMain");
        if (tbl != null) {
            for (var i = 0; i < tbl.rows.length; i++) {
                for (var j = 0; j < tbl.rows[i].cells.length; j++)
                    tbl.rows[i].cells[j].onclick = function () { 
                    getval(this); };
            }
        }
        function getval(cel) {
            var theTarget;
            theTarget = cel.innerHTML;
            document.getElementById("status").value = cel.innerHTML.trim();
        }
    </script>
</body>
</html>

Upvotes: 2

Related Questions