带2个选择框的动态表

Question

I'm trying to do something like this . A table with a button to dynamically add a row. That works fine but my problem is with the 2 select boxes. I want to change the select box that is in the same row and not just the first one. How can I do that?

<form method="post" action="process.php">
    <input type="button" value="Add Row" onclick="addRow('dataTable')">
    <table id="dataTable" width="350px" border="1">
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="chk[]">
                </td>
                <td>
                    <input type="text" name="txt[]">
                </td>
                <td>
                    <select id="countries" onchange="giveSelection(this.value)" name="tipo[]">
                        <option selected="selected" value="10000">--Select a country--</option>
                        <option value="1">Spain</option>
                        <option value="2">Germany</option>
                        <option value="3">U.S.A</option>
                    </select>
                </td>
                <td>
                    <select id="cities" name="cities[]">
                        <option selected="selected" data-option="10000">--Select a city--</option>
                        <option value="1" data-option="1">Madrid</option>
                        <option value="2" data-option="1">Barcelona</option>
                        <option value="3" data-option="1">Valencia</option>
                        <option value="4" data-option="2">Munich</option>
                        <option value="5" data-option="2">Berlin</option>
                        <option value="6" data-option="3">New York</option>
                        <option value="7" data-option="3">Houston</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="submit" value="Send">
</form>

And here is my JS code:

var countries = document.querySelector('#countries');
var cities = document.querySelector('#cities');
var cities2 = cities.querySelectorAll('option');


function giveSelection(selValue) {
    cities.innerHTML = '';
    for (var i = 0; i < cities2.length; i++) {
        if (cities2[i].dataset.option === selValue) {
            cities.appendChild(cities2[i]);
        }
    }
}



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;
        switch (newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
        }
    }
}

Answer 1

Here is the updated version of your JsFiddle . The code can be simplified more but for now I have just updated your code so that you can understand the modifications easily.

Following are the changes:

1. Added Jquery Library refernce
2. Used jQuery on change event instead of inline event
3. Used jQuery to find the Cities select list in the same row of changed country
4. Used Classes instead of Ids for Both selects as Id is always used for uniqueness.