我想要使​​用 Javascript 从特定 tr 索引中获取 td 值 [关闭]

Question

<table border="1px" id="myTable" cols="3">
<tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
    <tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
    <tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
    <tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
</table>

<script language="JavaScript">
    function function1(elem) {
        alert("Cell Index :"+ elem.rowIndex);

    }
</script>

我想要使用 Javascript 的特定 tr 索引的 td 值实际上我正在创建一个表，当我单击特定 tr 的 td 中的编辑按钮转换为文本框并编辑表时，该表在 tr 末尾具有编辑功能。

Answer 1

既然您已使用 jQuery 标记发布此内容，那么就到这里。虽然您的问题不是 100% 清楚，但您想要执行下面的代码，并且如 jsfiddle 所示，应该足以让您继续前进。假设您想在有人单击该行时向单元格添加一个文本区域。

演示：http://jsfiddle.net/7x36X/

HTML：

<table border="1px" id="myTable" cols="3">
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
</table>

JAVASCRIPT/jQuery:

$(document).ready(function () {
    //Listen to a click on a tr
    $('tr').on('click', function (event) {
        //check that we are clicking in a new row else do nothing
        if ($('.someInput', $(this)).length == 0) {
            // get the last td as our target for example
            var targetTD = $('td:last', $(this));
            //get previous content of the TD
            var previousContent = targetTD.text();
            // Now add in a textarea with a save button
            targetTD.html('<textarea class="someInput">' + previousContent + '</textarea><button class="saveButton">Save</button>');
            // Do whatever else you need to do here to make your changes persistent e.g. AJAX to server
        }
    });

    // We are adding what is called a delegated event listener for the save buttons which haven't been created yet.
    $('#myTable').on('click', '.saveButton', function (event) {
        // get the target TD
        var targetTD = $(this).parent();
        // get Textarea text
        var text = $(this).siblings('.someInput').val();
        // Set the targetTD html as the text
        targetTD.html(text);
    });
});

Answer 2

您可以尝试这样的方法来获取数组中的所有 td (Example)：

JS：

$(function(){
    $("#myTable tr td.edit").on('click', function(e){
        var tr = $(this).closest('tr');
        var tds = $(tr).find("td:not('.edit')").get();
        console.log(tds); // Array of all td in the clicked tr

        // Put each td's text in a text box
        console.log($(tds[0]).text()); // First td text
        console.log($(tds[1]).text()); // Second td text
        console.log($(tds[2]).text()); // Third td text
    });
});

HTML：

<table border="1px" id="myTable">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td class='edit'>Edit</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td class='edit'>Edit</td>
    </tr>
</table>

另外，id 必须是唯一的，如果需要，请在 tds 中使用 class。您在同一页面中多次使用过id="td1" 和其他类似的ids。

Answer 3

Working Fiddle even id's are changed
Javascript

function function1(elem) {
    if (elem.getAttribute("isEditing") == null) {
        elem.setAttribute("isEditing","true");
        for (i = 0; i < elem.children.length; i++) {
            //Create an input type dynamically.
            var element = document.createElement("input");

            //Assign different attributes to the element.
            element.setAttribute("type", "text");
            element.setAttribute("value", elem.children[i].innerHTML);
            element.setAttribute("id", "inp-" + elem.children[i].getAttribute("id"));
            elem.children[i].innerHTML = "";
            elem.children[i].appendChild(element);
        }
    }
}