当用户选择某些内容时,我会输出一个表格。我有一个按钮,允许用户将一个空表行附加到表的末尾,但我似乎无法让它正常工作。
PHP 中的 HTML 生成代码:
echo<table>
"<table id='roof-component-data-table'><tbody>
<tr>
<th>Roof Component</th>
<th>Delete</th>
</tr>";tr>
<tr id="roofComponentRow" style="display: none;">
//empty row used to clone<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="" <="" td=""></td>
echo</tr>
"<tr id='roofComponentRow' style='display: none;'>"; <tr id="roofComponentRow0">
echo "<td><input type='text' id='roof <td><input type="text" id="roof-component-name'name" name='roofname="roof-component-name[]'name[]" value=''<value="Air Film" <="" td=""></td>";td>
echo "< <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Air Film")">Delete</tr>";a></td>
</tr>
while<tr ($roofComponentsRowid="roofComponentRow1">
= mysqli_fetch_array($roofComponentsData)) { <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Surfacing" <="" td=""></td>
echo<td><a "<trhref="#" id='roofComponentRow".class="removeRoofComponentRow" $ComponentRowCounteronclick="removeRoofComponent("Surfacing")">Delete</a></td>
."'>"; </tr>
<tr id="roofComponentRow2">
echo "<td><input type='text' id='roof <td><input type="text" id="roof-component-name'name" name='roofname="roof-component-name[]'name[]" value='".value="Membranes" $roofComponentsRow['roof_component_name']<="" ."'<td=""></td>";td>
echo "<td><a<td><a href='#'href="#" class='removeRoofComponentRow'class="removeRoofComponentRow" onClick='removeRoofComponentonclick="removeRoofComponent(\"{$roofComponentsRow['roof_component_name']}\""Membranes")'>Delete<">Delete</a></td>";td>
</tr>
echo<tr "<id="roofComponentRow3">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Overlay Boards" <="" td=""></tr>";td>
<td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Overlay Boards")">Delete</a></td>
</tr>
$ComponentRowCounter++; <tr id="roofComponentRow4">
} <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Insulation" <="" td=""></td>
echo "< <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Insulation")">Delete</table>";a></td>
</tr>
echo"<input type='button' value='+' id='addRoofComponentRow' class='addRoofComponentRow'</>";tbody>
</table>
<input type="button" value="+" id="addRoofComponentRow" class="addRoofComponentRow">
这是我的表格的样子:
<table>
<tbody>
<tr>
<th>Roof Component</th>
<th>Delete</th>
</tr>
<tr id="roofComponentRow" style="display: none;">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="" <="" td=""></td>
</tr>
<tr id="roofComponentRow0">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Air Film" <="" td=""></td>
<td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Air Film")">Delete</a></td>
</tr>
<tr id="roofComponentRow1">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Surfacing" <="" td=""></td>
<td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Surfacing")">Delete</a></td>
</tr>
<tr id="roofComponentRow2">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Membranes" <="" td=""></td>
<td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Membranes")">Delete</a></td>
</tr>
<tr id="roofComponentRow3">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Overlay Boards" <="" td=""></td>
<td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Overlay Boards")">Delete</a></td>
</tr>
<tr id="roofComponentRow4">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Insulation" <="" td=""></td>
<td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Insulation")">Delete</a></td>
</tr>
</tbody>
</table>
<input type="button" value="+" id="addRoofComponentRow" class="addRoofComponentRow">
现在,当用户单击 +
按钮时,它将触发一些 JS,该 JS 应该克隆我的空行并将其附加到表的末尾。
这是我尝试这样做的方式:
$(function() {
var $removeIDValue = 0;
$(document.body).on('click', '.addRoofComponentRow', function () {
var $emptyRoofComponentRow = $("#roofComponentRow").clone();
$removeIDValue++
var $emptyRoofComponentRowClone = $emptyRoofComponentRow.clone();
var $newRowID = 'added_roof_component_row' + $removeIDValue;
$emptyRoofComponentRowClone.attr('id', $newRowID)
$emptyRoofComponentRowClone.children('td').last().after('<td><a href="#" class="removeRow" data-remove-row="' + $newRowID + '">Delete</a></td>');
$('#roof-component-data-table').append($emptyRoofComponentRowClone);
$emptyRoofComponentRowClone.show();
});
});
当我点击按钮时,什么也没有发生,我没有看到任何东西被添加到表格中,我也没有收到任何控制台错误。我还使用该函数设置了一个警报,以查看该函数是否触发以及是否显示了我的警报消息。
我哪里出错了?
最佳答案
关于javascript - 将空表行附加到表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31927073/