JSFiddle - React, Tailwind, and code Playground

by srhcan

HTML

<form name="summary_form" method="post" action="">
    <table width="100%" border="1" cellspacing="0" cellpadding="0" align="left">
        <tr>
            <td width="15%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Start Date</font></p></b>

            </td>
            <td width="7%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Seq#</font></p></b>

            </td>
            <td width="25%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Position</font></p></b>

            </td>
            <td width="25%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Location</font></p></b>

            </td>
            <td width="25%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Department</font></p></b>

            </td>
            <td width="15%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Salary/Hourly Rate</font></p></b>

            </td>
            <td height="29" bgcolor="#999999">
                <div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif" color="#993300"><b><font color="#FFFFFF">&nbsp;</font> 
                    </b>
                    </font>
                </div>
            </td>
        </tr>
        <tr>
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="10">10/24/2008</div>
            </td>
            <td width="7%" height="29" style="font-family: Verdana; font-size: 8pt">
     ...

JavaScript

// ** add table row click event 
function row_OnClick(tblId) {
    try {
        var rows = document.getElementById(tblId).rows;
        for (i = 0; i < rows.length; i++) {
            var _row = rows[i];
            _row.onclick = function () {
                return function () {
                    // YOUR CODE HERE
                };
            }(_row);
        }
    }
        catch (err) { }
    }
}

function getCurrentRow() {
    var rows = parseInt(document.summary_form.rows.value);
    var row = 0;
    if (rows > 1) {
        for (i = 0; i < rows; i++) {
            if (document.summary_form.R[i].checked) {
                row = document.summary_form.R[i].value;
                break;
            }
        }
    } else if (rows == 1) {
        if (document.summary_form.R.checked) row = 1;
    }
    return row;
}

function setCurrentKeysValues() {
    var successful = false;
    var row = getCurrentRow(); // Get the currently selected row

    var elementsLength = document.keys_form.elements.length;
    if (row > 0) //	Only if a row is selected
    {
        // set the values in keys_form for current selected row
        for (i = 0; i < elementsLength; i++) {
            keyName = document.keys_form.elements[i].name;
            summarykey = document.summary_form.elements[keyName + row];
            if (summarykey != null) //	if summarykey is an object
            {
                keyValue = summarykey.value;
                document.keys_form.elements[keyName].value = keyValue;
                successful = true;
            }
        }
    }
    return successful;
}

function editClicked() {
    var success = setCurrentKeysValues();
    if (success == true) {
        document.keys_form.buttonaction.value = "edit";
        document.keys_form.method = "POST";
        document.keys_form.target = "detailIframe";
        document.keys_form.action = "genericDet.jsp";
        document.keys_form.submit();
    }
}