Question

我有一个表格，其中有三列(A: datefield, B: selectbox, C: checkbox)。

现在当有人检查复选框时，具有选择框的column(B)应转换为列文本字段。这意味着我希望在更改checkbox事件时将selectbox转换为textfield，反之亦然。那可能吗？？如果是这样的话？（使用js，请不要jquery）

非常感谢回复。

Answer 1

尝试以下，

<html>
<body>
    <script type="text/javascript">
function toggleSelect() {
    var isChecked = document.getElementById("check").checked;
        if(isChecked) {
    document.getElementById("toggle").innerHTML = "<input type='text' id='txt'></input>";
    } else {
    document.getElementById("toggle").innerHTML = "<select> <option value='1'>1</option> </select> ";
    }
    //alert(isChecked);
}
</script>
    <table> 
        <tr> 
            <td> DateField </td>
            <td id="toggle"> 
                <select> <option value="1">1</option> </select> 
            </td>
            <td> <input type="checkbox" id="check" onchange="javascript:toggleSelect();">change</input></td>
        </tr>
    </table>
</body>
</html>

Answer 2

将两个div标签放在

一个包含你想要改变的组件（对于这个div给出一个类名＆＃34; comp1可见＆＃34;并且在CSS集中样式有display: block）

另一个div与你想要替换的组件（对于这个div给出一个类名＆＃34; comp2隐藏＆＃34;并且在CSS集中样式有display:none）

使用onclick事件来调用函数...

function insertitem(rvalue){
            if(rvalue.value==1){
                var temp=document.getElementsByClassName("comp1");


            temp[0].classList.remove("hidden");
            temp[0].classList.add("visible");
            }
            else if(rvalue.value==2){
                var temp=document.getElementsByClassName("comp2");

            temp[0].classList.remove("hidden");
            temp[0].classList.add("visible");

            }
        }

这应该有用.. PS：因为你发布任何你的代码..我无法解释

将选择框更改为文本字段，反之亦然

2 个答案: