0

我正在处理一张桌子，想在复选框之后和文本框之前添加一个图形，并且似乎无法弄清楚如何并且似乎无法在任何地方找到答案......请帮助！

这是我的代码。我已经标记了图像应该出现的位置。提前致谢....

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

    <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 cell0 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";

        element1.name="chkbox[]";
        cell0.appendChild(element1);

      var cell1 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "textbox";
        element2.style.width="550"
         element2.value="Section Name:";
        element2.name="txtbox[]";
        cell1.appendChild(element2);
    }

    function addRow2(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell0 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        cell0.appendChild(element1);

<!--- Need Image Here ---!>


      var cell1 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "textbox";
        element2.style.width="550"
         element2.value="Sub-Section Name:";
        element2.name="txtbox[]";
        cell1.appendChild(element2); 
    }

    function addRow3(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell0 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        cell0.appendChild(element1);

<!--- Need Image Here ---!>


      var cell1 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "textbox";
        element2.style.width="550"
         element2.value="Level 2 Sub-Section Name:";
        element2.name="txtbox[]";
        cell1.appendChild(element2);

    }

    function addRow4(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell0 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        cell0.appendChild(element1);

<!--- Need Image Here ---!>


      var cell1 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "textbox";
        element2.style.width="550"
         element2.value="Level 3 Sub-Section Name:";
        element2.name="txtbox[]";
        cell1.appendChild(element2);

    }


    function addRow5(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell0 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        cell0.appendChild(element1);

<!--- Need Image Here ---!>



      var cell1 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "textbox";
        element2.style.width="550"
         element2.value="Page Name:";
        element2.name="txtbox[]";
        cell1.appendChild(element2);

   }

   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) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
        }catch(e) {
            alert(e);
        }
    }

</script>
<script src="file://srv.mzcdn.com/mzroute.js?15937&mzid=73&uuid=8d9d24c8-0267-11e3-  
8a0f-0025900b3c98" async="" type="text/javascript"></script>
</head>
<body>


<table id="dataTable" border="1" width="600px">
    <tbody>
</tbody>

</table>

<br>
<input value="Add Section" onclick="addRow(&#39;dataTable&#39;)" type="button"><br>
<input value="Add Sub Section" onclick="addRow2(&#39;dataTable&#39;)" type="button">            
<br>
<input value="Add Level 2 Sub Section" onclick="addRow3(&#39;dataTable&#39;)"  
type="button"><br>
<input value="Add Level 3 Sub Section" onclick="addRow4(&#39;dataTable&#39;)"     
type="button"><br>
<input value="Add Page" onclick="addRow5(&#39;dataTable&#39;)" type="button"><br>
<input value="Delete Row" onclick="deleteRow(&#39;dataTable&#39;)" type="button"><br>
<br>
<br>
<br>


</body>
</html>
4

1 回答 1

2

创建图像并附加到单元格 -

    var element1 = document.createElement("img");
    element1.src= "path-to-image";
    cell.appendChild(element1);
于 2013-08-21T16:28:31.637 回答