views:

10

answers:

0

I have a search criteria table that I want the user to be able to grow and shrink based on how specific they want their search to be.

Here is the HTML for the table:

<html:form action="/queryDocuments">
    <table id="searchTable" align="center" 
        style="background-color: #cccccc; font-family: verdana">
        <tr>
            <td></td>
            <td></td>
            <td><html:text property="itemByNameSearch"/></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td><img src="res/icon/sign_add.png" onclick="addRow()"/></td>
            <td>search by</td>
            <td><html:text property="queryKeywordByName" /></td>
            <td>for</td>
            <td><html:text property="keywordByNameSearch" /></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td align="center"><html:submit 
                style="font-family:verdana; font-weight:bold" value="find" />
                <input style="font-family: verdana; font-weight: bold" 
                    type="button" value="clear fields" id="fieldClear"/></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</html:form>

I wrote these script functions to manipulate the table when the user clicks on the "add" and "remove" images.

var rowCount = 1;

function addRow() {
    var table = document.getElementById("searchTable");

    if (rowCount < 3) {       
        if (rowCount === 1) {
            var rowSpace = table.insertRow(table.rows.length - 1);
            rowSpace.innerHTML = getNewCritRow().innerHTML;
            rowCount++;

            table.rows[1].cells[0].childNodes[0].setAttribute("src", "res/icon/sign_remove.png"); // referenced line
            table.rows[1].cells[0].childNodes[0].setAttribute("onclick", "removeRow(this)"); //referenced line
            addPlusNode();
        } else {
            var rowSpace = table.insertRow(table.rows.length - 2);
            rowSpace.innerHTML = getNewCritRow().innerHTML;
            rowCount++;
        }
        if (rowCount === 3) {
            table.deleteRow(table.rows.length - 2);
        }
    }
}

function removeRow(element) {
    var table = document.getElementById("searchTable");
    if (rowCount > 1) {
        var toastRow = element.parentNode.parentNode;

        for (var i = 0; i < table.rows.length; i++) {
            if (toastRow === table.rows[i]) {
                table.deleteRow(i);
                if (i === 1) {
                    table.rows[1].cells[0].textContent = "search by";
                    /* for some reason, the above line works correctly
                       though cells[1] should be the correct cell that
                       contains only text, not cells[0] */
                }
            }
        }
        if (rowCount === 3) {
            addPlusNode();
        }
        rowCount--;

        if (rowCount === 1) {
            table.rows[1].cells[0].childNodes[0].setAttribute("src", "res/icon/sign_add.png"); // troubled line
            table.rows[1].cells[0].childNodes[0].setAttribute("onclick", "addRow()"); // troubled line
            table.deleteRow(table.rows.length - 2);
        }
    }
}

function addPlusNode() {
    var table = document.getElementById("searchTable");

    var plusRow = document.createElement("tr");
    var plusNode = document.createElement("td");
    var plusImg = document.createElement("img");
    plusImg.setAttribute("src", "res/icon/sign_add.png");
    plusImg.setAttribute("onclick", "addRow()");

    plusNode.appendChild(plusImg);
    plusRow.appendChild(plusNode);
    plusRow.appendChild(document.createElement("td"));
    plusRow.appendChild(document.createElement("td"));
    plusRow.appendChild(document.createElement("td"));
    plusRow.appendChild(document.createElement("td"));

    var newRow = table.insertRow(table.rows.length - 1);
    newRow.innerHTML = plusRow.innerHTML;
}

function getNewCritRow() {
    var rowNode = document.createElement("tr");

    var plusImg = document.createElement("img");
    plusImg.setAttribute("src", "res/icon/sign_remove.png");
    plusImg.setAttribute("onclick", "removeRow(this)");
    rowNode.appendChild(document.createElement("td").appendChild(plusImg));

    var andCell = document.createElement("td");
    andCell.setAttribute("style", "text-align:right");
    andCell.innerHTML = "and";
    rowNode.appendChild(andCell);

    var moreStuffCell = document.createElement("input");
    moreStuffCell.setAttribute("type", "text");
    //moreStuffCell.setAttribute("name", "queryKeywordByName");
    moreStuffCell.setAttribute("value", "more stuff");
    rowNode.appendChild(document.createElement("td").appendChild(moreStuffCell));

    var forCell = document.createElement("td");
    forCell.innerHTML = "for";
    rowNode.appendChild(forCell);

    var anotherCell = document.createElement("input");
    anotherCell.setAttribute("type", "text");
    //anotherCell.setAttribute("name", "keywordByNameSearch");
    anotherCell.setAttribute("value", "another specific value");
    rowNode.appendChild(document.createElement("td").appendChild(anotherCell));

    return rowNode;
}

The two troubled lines in the function removeRow() throw Uncaught TypeError: Object #<a Text> has no method 'setAttribute'. The strange thing is that the two referenced lines in addRow() execute correctly when that function is invoked. (Technically the second troubled line might execute correctly since the line above it always halts the script completely, I simply assume it was fail also since it is similar.)

Another problem I am having is with the line above the block comment, also in removeRow(). Strangely the code does what I want it to do as is, but I don't understand why. table.rows[1].cells[0] should be an <img> element, not a <td> element.

Thank you, in advance for your help. I've had no experience with JavaScript until yesterday. w3schools.com has saved my life :)