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

Question

JavaScript函数：

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

在下面的示例用法中，单击表格后，列索引1（价格）中的值将显示在价格文本框中。

样品用法：

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

问题：

表格的第二列（第一列处于隐藏状态）具有单选按钮和标签的组合，当单击该行时，“价格”文本框具有如下值：

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

我只需要在价格文本框中显示值5 ，所以我需要修剪显示的元素标签。 除具有单选按钮和标签的组合的单元格外，所有其他仅具有文本的单元格（无单选按钮）均已正确复制到其相应的文本框中。 对此负责的代码是：

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();
}

HTML：

<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>

Answer 1

在检查了几个论坛之后，我想出了一个答案：

我从这里替换了我的代码：

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

对此：

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