时间戳

首页 > 解决方案 > 如何传递值而不是索引（对 Javascript 不太熟悉）

javascript - 如何传递值而不是索引（对 Javascript 不太熟悉）

问题描述

我觉得这是一个非常简单的答案。我在下面找到了一个不错的脚本，我只想更改从下拉列表中传递给文本框的内容。目前，如果选择美国，美国将传递到文本框。但是，美国的价值是“我们”。我希望将“我们”传递给文本框。需要进行哪些调整才能使这项工作有效？先感谢您！

<HTML>
    <HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
    function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
            case "text":
            newcell.childNodes[0].value = "";
            newcell.childNodes[0].id = "txt"+rowCount;
            break;
            case "checkbox":
            newcell.childNodes[0].checked = false;
            break;
            case "select-one":
            newcell.childNodes[0].selectedIndex = 0;
            break;
            }
        }
    }
    function deleteRow(tableID) {
        try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {
            alert("Cannot delete all the rows.");
            break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
            }
            }
        }catch(e) {
        alert(e);
        }
    }
    function addVal(obj,ob){
        var suf = ob.parentNode.parentNode.rowIndex;
        var txt = document.getElementById('txt'+suf);
        txt.value = obj;
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    <TABLE id="dataTable" width="350px" border="1">
    <TR>
    <TD><INPUT type="checkbox" name="chk"/></TD>
    <TD><INPUT type="text" id="txt0" name="txt"/></TD>
    <TD>
    <SELECT name="country" onchange="addVal(this.options[this.selectedIndex].innerHTML,this)">
    <OPTION value="in">India</OPTION>
    <OPTION value="de">Germany</OPTION>
    <OPTION value="fr">France</OPTION>
    <OPTION value="us">United States</OPTION>
    <OPTION value="ch">Switzerland</OPTION>
    </SELECT>
    </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>

标签： javascripthtml

解决方案

改变

<SELECT name="country" onchange="addVal(this.options[this.selectedIndex].innerHTML,this)">

至

<SELECT name="country" onchange="addVal(this.value,this)">

编辑您的后续问题 您当前的脚本是专门为您正在使用的表量身定制的。以至于它的 childNode 索引硬编码为 0 newcell.childNodes[0].value。addRow您必须了解函数和表格内容之间存在相关性。

我对表格和函数进行了一些快速而简单的更改，以便每个表格单元格允许超过 1 个控件，尽管您需要将其更改为您的风格，以便它完成您需要它做的事情。

<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        //alert(newcell.childNodes);
        for(var a = 0; a < newcell.childNodes.length; a++)
        {
            switch(newcell.childNodes[a].type) {
            case "text":
            newcell.childNodes[a].value = "";
            newcell.childNodes[a].id = newcell.childNodes[a].name + rowCount;
            break;
            case "checkbox":
            newcell.childNodes[a].checked = false;
            break;
            case "select-one":
            newcell.childNodes[a].selectedIndex = 0;
            break;
            }
        }

    }
}
function deleteRow(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
        if(rowCount <= 1) {
        alert("Cannot delete all the rows.");
        break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
        }
        }
    }catch(e) {
    alert(e);
    }
}
function addVal(obj,ob){
    var suf = ob.parentNode.parentNode.rowIndex;
    var txt = document.getElementById('txt'+suf);
    txt.value = obj;
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" id="txt0" name="txt"/><input type="text" id="addedTxt0" name="addedTxt"/></TD>
<TD>
<SELECT name="country" onchange="addVal(this.value,this)">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

推荐阅读