Question

我对jquery / html非常陌生，想写一本日记，我可以用它来记录我在桌子上的长跑时间。

这是我的HTML代码：

<head>

<title>Running Diary</title>
<link type = "text/css" rel = "stylesheet" href= "running.css"/>
<script language = "javascript" type = "text/javascript" src ="running.js"></script>

</head>


<body>
<!-- Title at the top of page !-->
    <h1 id = "title"> Running Diary </h1>
</br>
</br>
</br>
<!-- Table containing text/date fields and the entries for a running diary. !-->
    <table id = "diary">

<!-- Column titles for the running diary !-->
        <thead id = "diaryHeader">
            <th>Date</th>
            <th>Distance Ran (KM)</th>
            <th>Time</th>
            </th>
        </thead>

<!-- The table row that contains the text field and enter button for adding each entry to the diary !-->
        <tbody>
            <tr id = "diaryFields">
                <td> <input type="date" id="dateField"/></td>
                <td> <input type="text" id="distanceField" placeholder="Distance"/> </td>
                <td> <input type="text" id="timeField" placeholder="HH:MM:SS"/> </td>
                <td> <input type="submit" value="Add" id="diarySubmit"/>

            </tr>

</table>

我希望提交按钮添加一个新的表格行onclick，文本/日期字段的值作为新表格行的数据。这样做的代码是什么？

我不知道，这就是我到目前为止所做的一切：

$(document).ready(function(){

$(#"diarySubmit").onclick(function(){

    var distanceRan = document.getElementByName("distanceField").value;
    var timeRan = document.getElementByName("timeField").value;
    var dateRan = document.getElementByName("dateField").value;
});
});

Answer 1

如果您使用getElementBy...，则正确的getElementbyId。但是，如果您使用的是Jquery，则应使用类似于$('#dateField').val()的语法。

当你刚接触编码时，这可能是一个艰难的地方。你应该仔细阅读Jquery的文档

以下是解决问题的第一步：

首先，在您的HTML head中包含Jquery，如下所示：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src ="running.js"></script>

下一部分是您的Jquery片段，它将从文本框中获取详细信息

$(document).ready(function(){
    $("#diarySubmit").on('click', function(){ //This handles the click function for diarySubmit button
        var distanceRan = $('#distanceField').val(); //Taking values from each textbox
        var timeRan = $('#timeField').val();
        var dateRan = $('#dateField').val();
        var new_row = '<tr><td>'+distanceRan+'</td><td>'+timeRan+'</td><td>'+dateRan+'</td></tr>'; //creating the new row of to be added
        $('table#your-table').append(new_row);
    });
});

但是，请从here和here查看JQuery的语法和其他文档。您可以从上面代码中的.click()，.on()，.val()，.append()开始学习。希望我帮忙。开始学习和阅读文档，你会喜欢JQuery。

编辑：对于您在评论中提出的问题，您必须这样做：

$('tr').on('#clearRow', 'click', function(){
    //Add code to remove row
});

这样做是因为clearRow是动态添加的元素，当DOM获得ready时，该元素不存在。因此，在向动态添加的元素添加点击处理程序时，必须使用上面提到的.on()函数。

Answer 2

你想要这样的东西：

fiddle

上的演示

使用Javascript：

$(document).ready(function () {

    $('#diarySubmit').click(function () {
        var distanceRan = $("#distanceField").val();
        var timeRan = $("#timeField").val();
        var dateRan = $("#dateField").val();
        $('#diary').append("<tr>" + "<td>" + dateRan + "</td>" + "<td>" + distanceRan + "</td>" + "<td>" + timeRan + "</td>" + "</tr>");
    });
});

HTML：

<table id="diary">
    <!-- Column titles for the running diary !-->
    <thead id="diaryHeader">
        <th>Date</th>
        <th>Distance Ran (KM)</th>
        <th>Time</th>
        </th>
    </thead>
    <!-- The table row that contains the text field and enter button for adding each entry to the diary !-->
    <tbody>
        <tr id="diaryFields">
            <td>
                <input type="date" id="dateField" />
            </td>
            <td>
                <input type="text" id="distanceField" placeholder="Distance" />
            </td>
            <td>
                <input type="text" id="timeField" placeholder="HH:MM:SS" />
            </td>
            <td>
                <input type="submit" value="Add" id="diarySubmit" />
        </tr>
</table>

确保添加指向jQuery CDN的链接，为此，在添加<head></head>之前在running.js代码中添加以下行：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

如何从文本字段添加表行

2 个答案:

fiddle