使用单选按钮和标签组合修剪表格单元格的HTML标签

Javascript函数:

我下面发布的JS函数是循环遍历在第二个参数中定义的列索引，同时循环也在第三个参数中定义的给定元素id。这将根据所单击行的列值填充文本框、单选按钮和下拉字段。

从下面的示例使用中，当单击表时，来自列索引1 (price)的值将显示在price文本框中。

<table id="tblPrice" onclick="gettabledata('tblPrice', '0,1,2,3', 'PriceId,Price,strtDt,endDt')">

问题:

表的第二列(第一列是隐藏的)有一个单选按钮和标签的组合，当点击这一行时，Price文本框的值如下所示:

<input type="radio" name="rbDefaultPrice" class="radio" value=""> <label style="font-size: 1em" class="price" for="lblPriceRbtn">5</label>

我只需要值5显示在Price文本框中，所以我需要减少显示的元素标签。所有其他只有文本(没有单选按钮)的单元格都被正确复制到相应的文本框中，除了具有单选按钮和标签组合的单元格。负责此操作的代码是:

document.getElementById(fieldId[i]).value = rowSelected.cells[colIndex[i]].innerHTML.trim();

innerHTML.trim()仅在我获得单元格值时删除空白。

JavaScript(转到带注释的行:Problem查看有问题的代码):

function gettabledata(tableId, colIndexes, fieldIds) {
    var table = document.getElementById(tableId); //Get table id to evaluate
    var cells = table.getElementsByTagName('td'); //Get all table cells per column
    //Get field Ids set in parameter
    var fieldId = fieldIds.split(","); 
    var colIndex = colIndexes.split(",");
    for (var i = 0; i < cells.length; i++) {
        var cell = cells[i];
        //Get column data on clicked row
        cell.onclick = function () {
            var rowId = this.parentNode.rowIndex;
            var rowsNotSelected = table.getElementsByTagName('tr');
            var rowSelected = table.getElementsByTagName('tr')[rowId]; //Get selected row
            //Get number of items in array and loop (NOTE: colIndex is an array parameter defined in called javascript from View)
            for (i = 0; i < fieldId.length; i++) {
                var elmntTag = document.getElementById(fieldId[i]).tagName; //Get element tag name of each filedId item (SELECT, INPUT)
                var elmntType = document.getElementById(fieldId[i]).getAttribute("type"); //Get element type of each filedId item (text, radio)
                //Check field if dropdown or input (text or radio)
                if (elmntTag == "INPUT") {
                    //Populate field depending on input type
                    if (elmntType == "text" || elmntType == "hidden") {
                        //PROBLEM
                        document.getElementById(fieldId[i]).value = rowSelected.cells[colIndex[i]].innerHTML.trim(); //Populate value of textbox id defined in the parameter
                    } else if (elmntType == "radio") {
                        //Populate value of radiobutton id defined in the parameter
                        var status = rowSelected.cells[colIndex[i]].innerHTML.trim();
                        var name = document.getElementById(fieldId[i]).getAttribute("name");
                        if (status == "Active") {
                            $('input[name=' + name + '][value="Active"]').prop('checked', true);
                        } else if (status == "Inactive") {
                            $('input[name=' + name + '][value="Inactive"]').prop('checked', true);
                        }
                    }
                //Check field if dropdown or input (text or radio)
                } else if (elmntTag == "SELECT") {
                    var dropdown = document.getElementById(fieldId[i]);
                    dropdown.value = rowSelected.cells[colIndex[i]].innerHTML.trim();
                }
            }
        }
    }
    $('#btnUpdate').show();
    $('#btnSave').hide();
}

<table id="template" style="display:none;">
    <tr>
        <td class="hidden"></td>
        <td>
            <input type="radio" name="rbDefaultPrice" class="radio" />
            <label style="font-size: 1em" class="price"></label>
        </td>
        <td class="startdate"></td>
        <td class="enddate"></td>
    </tr>
</table>